import React, { Component, Fragment } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { connect } from 'dva'
import {
  Card,
  Button,
  Form,
  Input,
  Modal,
  Descriptions,
  Steps,
  Divider,
  Drawer,
  Timeline,
  Spin,
  Cascader,
  message,
  Tabs,
  Select,
  Radio,
  InputNumber,
  Popconfirm,
  Table, Icon,
  Upload
} from 'antd'
import MyPageTable from '@/components/MyPageTable'
import { uploadUrl } from '@/config'
import AntTable from '@/components/AntTable'
import { onTableData, getParam } from '@/utils/utils.js'
import { getToken } from '@/utils/localStorage'
import orderService, {
  billRefundOrder,
  getSiriusReportRecordV3,
  orderServiceRefund,
  updateOrderStagesById,
  //userPreRiskCheck
} from '@/services/order'
import SendOrder from './SendOrder'
import CreditDetail from './creditDetail'
import CreditDetailOld from './creditDetailOld'
import CreditDetailThree from './creditDetailThree'
import FourItemapply from './PublicCard/FourItemapply'
import FourItemapply1 from './PublicCard/FourItemapply1'
import FiveItem from './PublicCard/FiveItem'
import FourItem from './PublicCard/FourItem'
import FourItem1 from './PublicCard/FourItem1'
import FiveItemrepay from './PublicCard/FiveItemrepay'
import ThreeItem from './PublicCard/ThreeItem'
import Historyoverdue from './Historyoverdue'
import Historyoverdue1 from './Historyoverdue1'
import CourtriskList from './CourtriskList'
// 风控报告
import XinyanReport from './Report/XinyanReport'
import BairongReport from './Report/BairongReport'
import moment from 'moment';

import { apply } from './data'

import _ from 'lodash'
import { getUserBankList} from "@/services/channel";
const { TextArea } = Input
const FormItem = Form.Item
const Option = Select.Option
const { Step } = Steps
const { TabPane } = Tabs
import styles from './index.less'
import CustomCard from '@/components/CustomCard'
import {
  AuditReason,
  AuditStatus,
  confirmSettlementStatus,
  confirmSettlementType,
  orderStatusMap,
  contractStatus,
  locationErrorType
} from '@/utils/enum'
import { optionsdata } from './data.js'
import OrderService from '@/services/order'
import { router } from 'umi'
import busShopService from '@/services/busShop'
import TianLangXingReport from './Report/TianLangXingReport'
import TanChaReport from './Report/TanChaReport'
import BeiDuoFen from './Report/BeiduofenReport'
import TeShuReport from './Report/TeshuReport'
import SeniorCreditRisk from './Report/SeniorCreditRisk'
import {
  addToBlack,
  handelCancelOrderNotary,
  handelQueryOrderNotary, handelQueryOrderNotaryLink,
  handleOrderNotary,
  hendleOrderNotary
} from '@/services/message'
import CopyToClipboard from '@/components/CopyToClipboard';
const StepsData = {
  '01': 0,
  '02': 0,
  '03': 1,
  '04': 1,
  '05': 2,
  '06': 3,
  '07': 4,
  '08': 4,
  '09': 5,
  '10': 5
}
const columnsByStagesStute = {
  '1': '待支付',
  '2': '已支付',
  '3': '逾期已支付',
  '4': '逾期待支付',
  '5': '已取消',
  '6': '已结算',
  '7': '已退款,可用',
  '8': '线下履约',
  '9':'线下已退款'
}
const signStatus = {
  CREATE: '合同已创建',
  UN_SIGN: '待用户签署',
  SiGNED: '用户已签署',
  SIGNED: '用户已签署',
  SUBMIT: '合同已提交',
  ACCEPT: '公证处已受理',
  PASSED: '公证书已下达'
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 }
  }
}
//平台备注
const columns = [
  {
    title: '备注人姓名',
    align: 'center',
    dataIndex: 'userName'
  },
  {
    title: '备注时间',
    align: 'center',
    dataIndex: 'createTime'
  },
  {
    title: '备注内容',
    align: 'center',
    dataIndex: 'remark'
  }
]
//商家备注
const columnsBusiness = [
  {
    title: '备注人姓名',
    align: 'center',
    dataIndex: 'userName'
  },
  {
    title: '备注时间',
    align: 'center',
    dataIndex: 'createTime'
  },
  {
    title: '备注内容',
    align: 'center',
    dataIndex: 'remark'
  }
]


// 在途订单表格
const payedOrderColumnsInformation = [
  {
    title: '商品名称',
    align: 'center',
    dataIndex: 'productName'
  },
  {
    title: '下单时间',
    align: 'center',
    dataIndex: 'orderTime'
  },
  {
    title: '订单状态',
    align: 'center',
    dataIndex: 'status',
    render: status => {
      return <span>{orderStatusMap[status]}</span>
    }
  },
  {
    title: '还款状态',
    align: 'center',
    dataIndex: 'isViolation',
    render: isViolation => {
      return (
        <span>
          {isViolation === '01' || isViolation === '03' ? '正常' : '逾期'}
        </span>
      )
    }
  }
]

// 账单信息
const columnsBill = [
  // {
  //   title: '总押金',
  //   dataIndex: 'totalDeposit',
  // },
  // {
  //   title: '押金减免',
  //   dataIndex: 'depositReductions',
  // },
  // {
  //   title: '冻结额度',
  //   dataIndex: 'freezePrice',
  // },
  // {
  //   title: '信用减免',
  //   dataIndex: 'creditDeposit',
  // },
  // {
  //   title: '实际冻结',
  //   dataIndex: '', // todo
  //   render: (text, record) => {
  //     return (record.freezePrice - record.creditDeposit).toFixed(2);
  //   },
  // },
  // {
  //   title: '买断价',
  //   dataIndex: 'salePrice',
  // },
  {
    title: '总租金',
    dataIndex: 'totalRent'
  },
  {
    title: '运费',
    dataIndex: 'freightPrice'
  },
  {
    title: '平台优惠',
    dataIndex: 'platformCouponReduction'
  },
  {
    title: '店铺优惠',
    dataIndex: 'couponReduction'
  }
]

//分期
// const columnsByStages = [
//   {
//     title: '总期数',
//     dataIndex: 'totalPeriods',
//   },
//   {
//     title: '当前期数',
//     dataIndex: 'currentPeriods',
//   },
//   {
//     title: '租金',
//     dataIndex: 'currentPeriodsRent',
//   },
//   {
//     title: '状态',
//     dataIndex: 'status',
//     align: 'center',
//     // render: status => <span>{columnsByStagesStute[status]}</span>,
//     render: (status, record) => {
//       const payedArry = ['1', '4'];
//
//       // '1': '待支付',
//       //   '2': '已支付',
//       //   '3': '逾期已支付',
//       //   '4': '逾期待支付',
//       //   '5': '已取消',
//       //   '6': '已结算',
//       //   '7': '已退款,可用',
//       return (
//         <>
//           <span
//             style={{ color: payedArry.includes(record.status) ? '#E83F40' : '' }}>{columnsByStagesStute[record.status]}</span>
//           <br/>
//           <Popconfirm title="是否对该期租金进行扣款?"
//                       onConfirm={() => this.paidPeriodOrder(record.orderId, record.currentPeriods)}>
//             <Button style={{ display: payedArry.includes(record.status) ? '' : 'none' }} type="primary"
//                     size="small">扣款</Button>
//           </Popconfirm>
//         </>
//       )
//     },
//   },
//   {
//     title: '支付时间',
//     dataIndex: 'repaymentDate',
//   },
//   {
//     title: '账单到期时间',
//     dataIndex: 'statementDate',
//   },
// ];
//买断
const columnsBuyOutYes = [
  {
    title: '是否已买断',
    dataIndex: 'createTime',
    render: () => '是'
  },
  {
    title: '买断价格',
    align: 'center',
    dataIndex: 'buyOutAmount'
  }
]
const columnsBuyOutNo = [
  {
    title: '是否已买断',
    align: 'center',
    dataIndex: 'createTime',
    render: () => '否'
  },
  {
    title: '当前买断价格',
    align: 'center',
    dataIndex: 'currentBuyOutAmount'
  },
  {
    title: '到期买断价格',
    align: 'center',
    dataIndex: 'dueBuyOutAmount'
  }
]
/* const columnsBuyOut = [
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '订单编号',
    dataIndex: 'buyOutOrderId',
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
  },
  {
    title: '销售价',
    dataIndex: 'realSalePrice',
  },
  {
    title: '已付租金',
    dataIndex: 'paidRent',
  },
  {
    title: '买断尾款',
    dataIndex: 'endFund',
  },
]; */
//结算
const columnsSettlement = [
  {
    title: '宝贝状态',
    align: 'center',
    dataIndex: 'settlementType',
    render: (text, record) => {
      return confirmSettlementType[text]
    }
  },
  {
    title: '违约金',
    dataIndex: 'amount'
  },
  {
    title: '是否支付',
    dataIndex: 'settlementStatus',
    render: (text, record) => {
      return confirmSettlementStatus[text]
    }
  }
]
{
  /* <Option value="01">承诺还款</Option>
<Option value="02">申请延期还款</Option>
<Option value="03">拒绝还款</Option>
<Option value="04">电话无人接听</Option>
<Option value="05">电话拒接</Option>
<Option value="06">电话关机</Option>
<Option value="07">电话停机</Option>
<Option value="08">客户失联</Option> */
}
let collstus = {
  '01': '承诺还款',
  '02': '申请延期还款',
  '03': '拒绝还款',
  '04': '电话无人接听',
  '05': '电话拒接',
  '06': '电话关机',
  '07': '电话停机',
  '08': '客户失联'
}
//商家催收
const BusinessCollection = [
  {
    title: '记录人',
    dataIndex: 'userName'
  },
  {
    title: '记录时间',
    dataIndex: 'createTime'
  },
  {
    title: '结果',
    dataIndex: 'result',
    render: result => collstus[result]
  },
  {
    title: '小记',
    dataIndex: 'notes'
  }
]
const paginationProps = {
  current: 1,
  pageSize: 1000,
  total: 1
}

@connect(({ order, loading, RentRenewalLoading }) => ({
  ...order,
  loading: loading.effects['order/queryOpeUserOrderDetail'],
  RentRenewalLoading: loading.effects['order/queryUserReletOrderDetail']
}))
@Form.create()
export default class Details extends Component {
  state = {
    drawerVisible: false,
    drawerData: [],
    visible: false,
    visibles: false,
    visibles2: false,
    settlement: null,
    uploading: false,
    xcurrent: 1,
    scurrent: 1,
    titles: '',
    subLists: [],
    creditInfo: {}, //信用详情
    comprehensiveSuggest: '',
    deliverOptions: [],
    auditRecord: {},
    logisticsFileUrl: '',
    processDetail: [],

    orderVisible: '',
    orderId: '',
    radioValue: '',
    damageValue: '',

    queryOrderStagesDetail: {},

    activeTab: '1',
    cost: '',
    sign: false,

    HastenList: [],
    HastenTotal: 1,
    HastenCurrent: 1,

    opeHastenList: [],
    opeHastenTotal: 1,
    opeHastenCurrent: 1,
    visibles3: false,
    creditEmpty: false,
    redata: {},
    reType: '',
    antRiskScore: -1,
    overdueId: '', // 逾期费的账单id
    xyData1: {},
    xyData2: {},
    xyData3: {},
    brData1: {},
    brData2: {},
    defaultActiveKey: '211',
    tlxData: {},
    tanchaData: {},
    bdfData: {},
    teshuData: {},
    seniorData: {},
    sendOrder: false,
    isClickedCloseOrder: false,
    //套餐变更弹窗
    productModalVisible:false,
    skuId:'',
    visibleRiskCheck:false,
    confirmLoading:false,
    deliverLoading: false,
    freeTypes:[],
    depositPeriod: null
  }


  //套餐变更弹窗
 renderProductModal =(productId)=>{
   const { selectProductByProducetDetail } = this.state
   this.apiProductModal(productId)
    this.setState({
      productModalVisible:true
    })
  }
   apiProductModal =(productId)=>{
     const { dispatch } = this.props
     dispatch({
       type: 'order/selectProductByProducetId',
       payload: {
         productId: productId && productId
       },
       callback: res => {
         if (res.responseType === 'SUCCESS') {
           if(res.data.productSkuses){
             let _specs = []
             let colorSpecs = []
             let productPackage =[]
             res.data.specs.forEach(v => {
               if (v.opeSpecId === 1) {
                 productPackage = v
               } else if (v.opeSpecId === 2) {
                 colorSpecs = v
               } else {
                 _specs = v
               }
             })
             this.setState({
               productPackage:productPackage,
               colorSpecs:colorSpecs,
               _specs:_specs
             })
           }
         let ServicesContent =  res.data?.additionals.map((item,index)=>{
             return item.shopAdditionalServices.content+'￥'+item.price
           })
           this.props.form.setFieldsValue({
             content:ServicesContent
           })
           this.setState({
             selectProductByProducetDetail: res.data,
           })
           this.queryOrderStatges();
         }
       }
     })
}
  componentDidMount() {
    const { dispatch } = this.props
    const orderId = getParam('id')

    this.setState({
      orderId
    })
    getParam('id') && localStorage.setItem('orderIdDiuShi', getParam('id'))
    this.onRentRenewalDetail()
    this.queryOrderStatges()
    this.onPageBusiness({ current: 1 })
    this.onPage({ current: 1 })
    this.onHasten(1, 3, '02')
    this.onHasten(1, 3, '01')
    // config/getByCode?code=esign:fee
    busShopService.getByCode().then(res => {
      this.setState({
        cost: res
      })
    })
    localStorage.setItem('defaultActiveKey', this.state.defaultActiveKey)
  }

  queryOrderStatges() {
    const { dispatch,productInfo} = this.props


    console.log(productInfo)

    dispatch({
      type: 'order/queryOrderStagesDetail',
      payload: {
        orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
      },
      callback: res => {
        if (res.responseType === 'SUCCESS') {
          res.data.orderByStagesDtoList.map(item => {
            if(item.status === '1'){
                if(moment().unix() > moment(item.statementDate).unix()){
                  item.overdueDays = moment(moment()).diff(item.statementDate, 'days');
                  item.overdueFee = (item.overdueDays * 0.0005 * item.currentPeriodsRent).toFixed(2);
                }
            }
          })
          this.setState({
            queryOrderStagesDetail: res.data
          })

          console.log(this.state.queryOrderStagesDetail)
        }
      }
    })
  }

  fetchProcessDetail() {
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    orderService
      .queryOrderStatusTransfer({
        orderId
      })
      .then(res => {
        this.setState({
          processDetail: res || []
        })
      })
  }

  onRentRenewalDetail = () => {
    const { dispatch } = this.props
    if (getParam('RentRenewal')) {
      dispatch({
        type: 'order/queryUserReletOrderDetail',
        payload: {
          orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
        }
      })
    } else {
      dispatch({
        type: 'order/queryOpeUserOrderDetail',
        payload: {
          orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
        },
        callback: res => {
          if (res.data.userOrderInfoDto.antRiskScore >= 0) {
            this.setState({
              antRiskScore: res.data.userOrderInfoDto.antRiskScore
            })
          }
         // this.userBankList(res.data.userOrderInfoDto.uid)
         // this.lookChannelDetail(getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'))
        }
      })
    }
  }
  //查看银行卡
 userBankList = async (param) => {
    try {
      const { data } = await getUserBankList(param)
      this.setState({
        userBankList:data
      })
    } catch (error) {
      message.error(error.message)
    }
  }
  //前置风控
  // lookChannelDetail = async (param) => {
  //   try {
  //     const { data } = await userPreRiskCheck({uid:param})
  //   this.setState({
  //     userPreRiskCheckList:data.hitRules,
  //     suggest:data.suggest
  //   })
  //   } catch (error) {
  //     message.error(error.message)
  //   }
  // }
  lookRiskCheck= () =>{
    this.setState({
      visibleRiskCheck:true
    })
  }
 handleCancelRiskCheck = () => {
   this.setState({
     visibleRiskCheck:false
   })
  }
  columnsRiskCheck = [

    {
      title: '结果',
      dataIndex: 'pass',
      align: 'center',
      render:(text,record) =>(
          <span>
            {text ?'通过' :'未通过'}
          </span>
      )
    },
    {
      title: '规则',
      dataIndex: 'rule',
      align: 'center'
    },
  ]
  // 查询蚁盾分
  onQueryYidunScore = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/getUserRisk',
      payload: {
        orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
      },
      callback: res => {
        this.setState({
          // antRiskScore: parseInt(
          //   JSON.parse(res.data.content.replace(/[\\]/g, '')).models[0].score
          // )
          antRiskScore: 80
        })
        this.onRentRenewalDetail()
      }
    })
  }

  onQueryOrderRemark = (pageNumber, pageSize, source) => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/queryOrderRemark',
      payload: {
        orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
        pageNumber,
        pageSize,
        source
      }
    })
  }

  //新建备注翻页
  onPage = (e = { current: 1 }) => {
    this.setState(
      {
        xcurrent: e.current
      },
      () => {
        this.onQueryOrderRemark(e.current, 3, '01')
      }
    )
  }

  onHasten = (pageNumber, pageSize, source) => {
    orderService
      .queryOrderHasten({
        pageNumber,
        pageSize,
        source,
        orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
      })
      .then(res => {
        if (source === '02') {
          this.setState({
            HastenList: res.records,
            HastenTotal: res.total
          })
        } else {
          this.setState({
            opeHastenList: res.records,
            opeHastenTotal: res.total
          })
        }
      })
  }

  onHastenBusiness = e => {
    this.setState(
      {
        HastenCurrent: e.current
      },
      () => {
        this.onHasten(e.current, 3, '02')
      }
    )
  }

  onHastenOpe = e => {
    this.setState(
      {
        opeHastenCurrent: e.current
      },
      () => {
        this.onHasten(e.current, 3, '01')
      }
    )
  }

  //商机备注翻页
  onPageBusiness = (e = { current: 1 }) => {
    this.setState(
      {
        scurrent: e.current
      },
      () => {
        this.onQueryOrderRemark(e.current, 3, '02')
      }
    )
  }

  //物流信息
  onClose = () => {
    this.setState({
      drawerVisible: false
    })
  }

  //查看物流
  onLogistics = (e, i) => {
    this.setState(
      {
        drawerVisible: true,
        drawerTitle: e
      },
      () => {
        this.onQueryExpressInfo(i)
      }
    )
  }

  handleOk = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch, userOrderInfoDto } = this.props
        if (this.state.titles === '备注') {
          if (getParam('RentRenewal')) {
            dispatch({
              type: 'order/orderRemark',
              payload: {
                orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
                remark: values.beizhu,
                orderType: userOrderInfoDto.type
              },
              callback: res => {
                this.onQueryOrderRemark(1, 3, '02')
                this.onRentRenewalDetail()
                this.setState({
                  visible: false
                })
              }
            })
          } else {
            dispatch({
              type: 'order/orderRemark',
              payload: {
                orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
                remark: values.beizhu,
                orderType: userOrderInfoDto.type
              },
              callback: res => {
                this.onQueryOrderRemark(1, 3, '01')
                this.onRentRenewalDetail()
                this.setState({
                  visible: false
                })
              }
            })
          }
        } else {
          dispatch({
            type: 'order/opeOrderAddressModify',
            payload: {
              realName: values.realName,
              street: values.street,
              telephone: values.telephone,
              province: values && values.city && values.city[0],
              city: values && values.city && values.city[1],
              area: values && values.city && values.city[2],
              orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
            },
            callback: res => {
              this.onRentRenewalDetail()
              this.setState({
                visible: false
              })
            }
          })
        }
      }
    })
  }

  onQueryExpressInfo = i => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/queryExpressInfo',
      payload: {
        expressNo: i.expressNo,
        receiverPhone: i.receiverPhone,
        shortName: i.shortName
      }
    })
  }

  getExpressList = () => {
    OrderService.selectExpressList().then(res => {
      this.setState({
        deliverOptions: res || []
      })
    })
  }

  getAuditRecord = () => {
    OrderService.queryOrderAuditRecord({
      orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    }).then(res => {
      this.setState({
        auditRecord: res || []
      })
    })
  }

  handleCancel = e => {
    this.props.form.resetFields()
    this.setState({
      visible: false,
      orderVisible: false,
      productModalVisible:false
    })
  }

  handleCancels = e => {
    this.setState({
      visibles: false,
      visibles2: false,
      visibles3: false,
      visiblesimg: false
    })
  }

  onKaiImg = e => {
    this.setState({
      img: e,
      visiblesimg: true
    })
  }

  showModal = e => {
    this.setState({
      visible: true,
      titles: e
    })
  }

  settleDia = (type, orderId, userOrderCashId, record) => {
    const { userOrderCashesDto, userViolationRecords } = this.props
    if (userViolationRecords && userViolationRecords[0]) {
      let radioValue = 'good'
      radioValue = userOrderCashesDto.damagePrice ? 'damage' : radioValue
      radioValue = userOrderCashesDto.lostPrice ? 'lose' : radioValue
      this.setState({
        checkValue: true,
        radioValue,
        damageValue:
          userOrderCashesDto.damagePrice || userOrderCashesDto.lostPrice
      })
    }
    this.setState({
      orderId,
      userOrderCashId,
      record,
      orderVisible: 'settle'
    })
  }

     // 获取合同id
 getSignDownloadUrl = () => {
      const { signFlowId } = this.props;
      OrderService.getSignDownloadUrl({ flowId: signFlowId }).then(res => {
        if (res && res.data.body.code == 0) {
          location.href = res.data.body.data.files[0].downloadUrl
      } else {
        message.error((res && res.data.body.message) || '未获取到签约合同');
      } 
    });
  };

  showOrderModal = (type, flag) => {
    const { antRiskScore } = this.state
    const { userOrderInfoDto, dispatch, receiptExpressInfo,form } = this.props
    if (['express', 'deliver'].includes(type)) {
      this.getExpressList()
      if(type === 'express'){
        setTimeout(() => {
          form.setFieldsValue({
            expressId: receiptExpressInfo.expressId,
            expressNo: receiptExpressInfo.expressNo,
            purchasePrice: receiptExpressInfo.purchasePrice || '',
            // imeiSn: receiptExpressInfo.imeiSn || '',
            logisticsFileUrl: receiptExpressInfo.logisticsFileUrl || ''
          })
        })
        this.setState({
          orderVisible: 'express',
        })
      }
    }

    if (type === 'settle') {
      this.settleDia()
    }
    if (type === 'audit') {
      if (flag) {
        if (antRiskScore >= 0 && userOrderInfoDto.userFaceCertStatus) {
          this.setState({
            titles: '审批通过'
          })
        } else {
          message.error(
            '请确认用户已通过【人脸认证】同时获取【蚁盾分】再进行审批操作。'
          )
          return
        }
      } else {
        this.setState({
          titles: '审批拒绝'
        })
      }
    }
    // 驳回取消申请
    if (type === 'cancelNot') {
      dispatch({
        type: 'order/applyCancel',
        payload: {
          orderId: userOrderInfoDto.orderId,
          status: 2
        },
        callback: () => {
          this.onRentRenewalDetail()
          this.queryOrderStatges()
        }
      })
    }

    
    // 设置协商逾期费
    if (type === 'overduefee') {
      // this.setState({
      //   titles: '设置协商逾期费',
      // });
    }
    this.setState({
      orderVisible: type
    })
  }

  showSendOrder = () => {
    this.setState({
      sendOrder: true
    })
  }

  // 添加黑名单
  addBlackList = ({
    userName: realName,
    telephone: phoneNo,
    idCard: idCardNo
  }) => {
    // 调用加入黑名单接口即可
    addToBlack({ realName, phoneNo, idCardNo }).then(() => {
      message.success('加入黑名单成功')
    })
  }
    // 申请公证
    orderNotary = () => {
        this.setState({
            confirmLoading: true
        })
        message.warn('正在公证中，请等待~',9000)
      handleOrderNotary({orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi') }).then((res) => {
          if(res.httpStatus === 200){
            message.success('申请公证成功')
            this.setState({
              visibleOrderNotary:true,
              orderNotaryData: res.data.weiXinHttpUrl
            })
            this.onRentRenewalDetail()
          }
          this.setState({
            confirmLoading: false
          })
        }).catch(err =>{
          this.setState({
            confirmLoading: false
          })
          message.error(err)
        })
      setTimeout(()=>{
        this.setState({
          confirmLoading: false
        })
      },9000)
    }
    //取消公证
  cancelOrderNotary = () => {
    message.warn('正在取消公证中，请等待~')
    handelCancelOrderNotary({orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi') }).then((res) => {
      if(res.httpStatus === 200){
        message.success('取消公证成功')
        this.onRentRenewalDetail()
      }
    }).catch(err =>{
      message.error(err)
    })
  }
  //重新获取公证地址
  queryOrderNotaryLink = () => {
    message.warn('正在获取中，请等待~')
    handelQueryOrderNotaryLink({orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')}).then((res) => {
      if(res.httpStatus === 200){
        message.success('获取成功')
        this.setState({
          visibleOrderNotary:true,
          orderNotaryData: res.data.weiXinHttpUrl
        })
        this.onRentRenewalDetail()
      }
    }).catch(err =>{
      message.error(err)
    })
  }
  //获取公证结果
  queryOrderNotary = () => {
    message.warn('正在获取中，请等待~')
    handelQueryOrderNotary({orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')}).then((res) => {
      if(res.httpStatus === 200){
        message.success('获取成功')
        this.setState({
          orderNotaryStatusStr: res.data.statusStr
        })
        if(res.data.status ==='3'){
          this.onRentRenewalDetail()
        }
      }
    }).catch(err =>{
      message.error(err)
    })
  }
  handleCancelOrderNotary = () => {
    this.setState({
      visibleOrderNotary:false
    })
  }
  closeSendOrder = () => {
    this.setState({
      sendOrder: false
    })
  }

  onXY = () => {
    location.href = this.props.contractUrl
  }

  viewCredit = async id => {
    try {
      if (this.state.defaultActiveKey === '99') {
        const res = await getSiriusReportRecordV3({
          uid: id,
          orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
          reportType: '02' // 获取天狼星 08 09 10
        })
        this.setState({
          tlxData: JSON.parse(res.data.reportResult)
        })
      }
    } catch (error) {
      message.error(error.message)
    }
  }

  // 手动扣除订单
  paidPeriodOrder = (orderid, period,type) => {
    // message.success('分期账单扣款请求成功,请稍后刷新页面查看。')
    // return;
    const { dispatch } = this.props
    dispatch({
      type: 'order/orderByStagesPay',
      payload: {
        orderId: orderid,
        currentPeriods: [period],
      },
      callback: res => {
        message.success('分期账单扣款请求成功,请5分钟左右后刷新页面查看。')
        this.queryOrderStatges()
      }
    })
  }
  billRefundOrder = (orderid, period,type) => {
    const { dispatch } = this.props
    dispatch({
      type: 'order/billRefundOrder',
      payload: {
        orderId: orderid,
        period: period,
        offlinedFlag:type
      },
      callback: res => {
        message.success('分期账单退款请求成功,请稍后刷新页面查看。')
        this.queryOrderStatges()
      }
    })
  }

  tabChange = key => {
    const { userOrderInfoDto } = this.props
    if (key === '3') {
      this.getAuditRecord()
    }
    if (key === '6') {
      this.fetchProcessDetail()
    }
    if (key === '2') {
      this.viewCredit(userOrderInfoDto.uid)
    }
    this.setState({
      activeTab: key
    })
  }

  // 驳回公证
  signReject = () => {
    OrderService.signReject({
      orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    }).then(res => {
      console.log(res)
      if (res) {
        this.onRentRenewalDetail()
      }
    })
  }

  // 通过公证
  signPass = () => {
    OrderService.signPass({
      orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    }).then(res => {
      if (res) {
        this.onRentRenewalDetail()
      }
    })
  }
//分期信息--修改租金
  changeCurrentPeriodsRent = (evt) =>{
    this.setState({
      currentPeriodsRent:evt.target.value,
    })
  }
  //修改完确认提交
  currentPeriodsRent =(value, inputIndex, key) =>{
    this.setState({
      [`currentPeriodsRent${inputIndex}`]: false
    })
    this.props.form.resetFields()
    const { dispatch } = this.props
      dispatch({
        type: 'order/updateOrderStagesById',
        payload: {
          currentPeriodsRent:Number(this.state.currentPeriodsRent) || value,
          id:key,
          orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
        },
        callback: res => {
          message.success('修改成功~')
          this.queryOrderStatges()
        }
      })

  }
  //关闭修改
  currentPeriodsRentClose =(evt, inputIndex, key) =>{
    this.setState({
      [`currentPeriodsRent${inputIndex}`]: false
    })
    this.props.form.resetFields()
  }

  editCurrentPeriodsRent =(evt, inputIndex, key)=>{
    this.setState({
      [`currentPeriodsRent${inputIndex}`]: true
    })
  }
    //增值服务--修改租金
  changePrice = (evt) =>{
    this.setState({
      servicePrice:evt.target.value,
    })
  }
  updatePriceByOrderAdditionalServicesId =(value, inputIndex, key) =>{
    this.setState({
      [`servicePrice${inputIndex}`]: false
    })
    this.props.form.resetFields()
        const { dispatch } = this.props
        dispatch({
            type: 'order/updatePriceByOrderAdditionalServicesId',
            payload: {
                price:Number(this.state.servicePrice) || value,
                id:key,
                orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            },
            callback: res => {
                message.success('修改成功~')
                this.queryOrderStatges()
            }
        })

    }
  //关闭修改
  priceClose =(evt, inputIndex, key) =>{
    this.setState({
      [`servicePrice${inputIndex}`]: false
    })
    this.props.form.resetFields()
  }
  editServicePrice =(evt, inputIndex, key)=>{
    this.setState({
      [`servicePrice${inputIndex}`]: true
    })
  }
  renderOrderInfoTab() {
    const {
      userOrderInfoDto = {},
      orderAdditionalServicesDto = {},
      orderAddressDto,
      opeRemarkDtoPage,
      amountInfoDto,
      businessRemarkDtoPage,
      productInfo,
      rentStart,
      rentDuration,
      unrentTime
    } = this.props
//商品信息
   const columnsInformation = [
      {
        title: '商品图片',
        align: 'center',
        dataIndex: 'imageUrl',
        render: imageUrl => {
          return (
              <img
                  src={imageUrl}
                  style={{
                    // width: 116,
                    height: 62
                  }}
              />
          )
        }
      },
      {
        title: '商品名称',
        align: 'center',
        dataIndex: 'productName'
      },
      {
        title: '商品编号',
        align: 'center',
        dataIndex: 'productId',
        render: (text, record) => {
          return (
              <a
                  className="primary-color"
                  onClick={() => router.push(`/goods/list/detail/${record.id}`)}
              >
                {text}
              </a>
          )
        }
      },
      {
        title: '规格颜色',
        align: 'center',
        dataIndex: 'spec'
      },
      {
        title: '数量',
        align: 'center',
        dataIndex: 'num'
      },
      {
        title: '是否可买断',
        align: 'center',
        dataIndex: 'buyOutSupport',
        render: buyOutSupport => {
          return <span>{buyOutSupport ? '可买断' : '不可买断'}</span>
        }
      },
      {
        title: '买断价',
        align: 'center',
        dataIndex: 'salePrice'
      },
      {
        title: '操作',
        width: 120,
        fixed: 'right',
        align: 'center',
        render: (e, record) => {
          return (
              <div>
                {
                    ((userOrderInfoDto.status ==='11' || userOrderInfoDto.status ==='13' || userOrderInfoDto.status ==='16') && localStorage.getItem('businessType')!= 'RENT') ?
                      <a
                          className="primary-color"
                          onClick={()=>{
                            this.renderProductModal(e.productId)
                          }}
                      >
                        套餐变更
                      </a> : null
                }
              </div>
          )
        }
      }
    ]
    const zengzhi = this.props.orderAdditionalServicesList || [] // 增值列表数据
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    return (
      <div>
        <Descriptions>
          <Descriptions.Item label="订单号" span={3}>
            {orderId}
          </Descriptions.Item>
          {this.props.contractUrl ? (
            <Descriptions.Item label="用户租赁协议">
              <a href={this.props.contractUrl} target="_blank">
                《租赁协议》
              </a>
            </Descriptions.Item>
          ) : null}
        </Descriptions>

        {orderAddressDto ? (
          <>
            <Descriptions
              title={
                <>
                  <CustomCard title="收货人信息" />
                </>
              }
            >
              <Descriptions.Item label="收货人姓名">
                {orderAddressDto && orderAddressDto.realname}
              </Descriptions.Item>
              <Descriptions.Item label="收货人手机号">
                {orderAddressDto && orderAddressDto.telephone}
              </Descriptions.Item>
              <Descriptions.Item label="收货人地址">
                {orderAddressDto && orderAddressDto.provinceStr}
                {orderAddressDto && orderAddressDto.cityStr}
                {orderAddressDto && orderAddressDto.areaStr}
                {orderAddressDto && orderAddressDto.street}
              </Descriptions.Item>
              <Descriptions.Item label="用户备注">
                {userOrderInfoDto.remark}
              </Descriptions.Item>
            </Descriptions>
            <Divider />
          </>
        ) : null}

        <CustomCard title="商品信息" style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsInformation}
          dataSource={onTableData(productInfo)}
          paginationProps={paginationProps}
        />

        <Descriptions title={<CustomCard title="租用信息" />}>
          <Descriptions.Item label="租用天数">{rentDuration}</Descriptions.Item>
          <Descriptions.Item label="起租时间">{rentStart}</Descriptions.Item>
          <Descriptions.Item label="归还时间">{unrentTime}</Descriptions.Item>
        </Descriptions>
        <Divider />

        {/* <CustomCard title="增值服务" style={{ marginBottom: 20 }} />
        {userOrderInfoDto.hasBrokenConfig ? (
          <div>
            <Descriptions.Item label="碎屏险">
              碎屏险：{userOrderInfoDto.brokenAmount}元
            </Descriptions.Item>
            <br />
            <Descriptions.Item label="支付状态">
              支付状态：
              {userOrderInfoDto.brokenConfigStatus == '0'
                ? '未支付'
                : userOrderInfoDto.brokenConfigStatus == '1'
                ? '已支付'
                : '已退款'}
            </Descriptions.Item>
          </div>
        ) : (
          '无'
        )}
        <Divider /> */}
        {/* <AntTable
          columns={columnsAddService}
          dataSource={zengzhi}
          dataSource={onTableData([orderAdditionalServicesDto])}
          paginationProps={paginationProps}
        /> */}

        <CustomCard title="商家备注" style={{ marginBottom: 20 }} />
        {/*<Button*/}
        {/*  type="primary"*/}
        {/*  style={{ margin: '20px 0' }}*/}
        {/*  onClick={() => this.showOrderModal('remark')}*/}
        {/*>*/}
        {/*  + 新建备注*/}
        {/*</Button>*/}
        <MyPageTable
          onPage={this.onPageBusiness}
          paginationProps={{
            current: this.state.scurrent,
            pageSize: 3,
            total: businessRemarkDtoPage.total
          }}
          dataSource={onTableData(businessRemarkDtoPage.records)}
          columns={columnsBusiness}
        />
        <Divider />
        <CustomCard title="平台备注" />
        <MyPageTable
          onPage={this.onPage}
          paginationProps={{
            current: this.state.xcurrent,
            pageSize: 3,
            total: opeRemarkDtoPage.total
          }}
          dataSource={onTableData(opeRemarkDtoPage.records)}
          columns={columns}
        />
      </div>
    )
  }

  // 在途订单
  renderPayedOrder() {
    const { userOrderInfoDto = {} } = this.props

    return (
      <div>
        <Descriptions title={<CustomCard title="在途订单" />}>
          <Descriptions.Item label="在途订单数">
            {userOrderInfoDto.userPayCount}
          </Descriptions.Item>
        </Descriptions>
        <AntTable
          columns={payedOrderColumnsInformation}
          dataSource={onTableData(userOrderInfoDto.userPayOrders)}
          paginationProps={paginationProps}
        />
        <Descriptions title={<CustomCard title="完结订单" />}>
          <Descriptions.Item label="完结订单数">
            {userOrderInfoDto.userFinishCount}
          </Descriptions.Item>
        </Descriptions>
        <AntTable
          columns={payedOrderColumnsInformation}
          dataSource={onTableData(userOrderInfoDto.userFinishOrders)}
          paginationProps={paginationProps}
        />
      </div>
    )
  }

  renderRiskTab() {
    const riskColumns = [
      {
        title: '综合评分',
        align: 'center',
        dataIndex: 'userName'
      },
      {
        title: '审批建议',
        align: 'center',
        dataIndex: 'createTime'
      },
      {
        title: '分值标注说明',
        align: 'center',
        dataIndex: 'remark'
      }
    ]
    const riskLevelColumns = [
      {
        title: '等级',
        align: 'center',
        dataIndex: 'userName'
      },
      {
        title: '审批建议',
        align: 'center',
        dataIndex: 'createTime'
      },
      {
        title: '说明',
        align: 'center',
        dataIndex: 'remark'
      }
    ]
    const {
      userOrderInfoDto = {},
      orderAddressDto,
      productInfo,
      userOrderCashesDto,
      orderBuyOutDto,
      wlList
    } = this.props
    const {
      drawerVisible,
      visibles,
      visibles2,
      visibles3,
      creditEmpty
    } = this.state
    const { getFieldDecorator } = this.props.form
    if (creditEmpty) {
      return '风险报告查询中，请稍后再来查看'
    }
    return (
      <div>
        {/*<Button*/}
        {/*  type="primary"*/}
        {/*  onClick={() => this.viewCredit( userOrderInfoDto.uid)}*/}
        {/*  size="small"*/}
        {/*  style={{ marginLeft: 5 }}*/}
        {/*>*/}
        {/*  查看详情*/}
        {/*</Button>*/}
        {visibles ? (
          <CreditDetail
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
            nsfLevel={this.state.nsfLevel}
          />
        ) : null}
        {visibles2 ? (
          <CreditDetailOld
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
          />
        ) : null}
        {visibles3 ? (
          <CreditDetailThree
            userOrders={userOrderInfoDto}
            creditInfo={this.state.creditInfo}
            userOrderInfoDto={userOrderInfoDto}
            orderAddressDto={orderAddressDto}
            productInfo={productInfo}
            userOrderCashesDto={userOrderCashesDto}
            comprehensiveSuggest={this.state.comprehensiveSuggest}
            // nsfLevel={this.state.nsfLevel}
          />
        ) : null}
        {/*<CustomCard title="风险分" style={{ marginBottom: 20 }} />*/}
        {/*<AntTable*/}
        {/*  bordered*/}
        {/*  columns={riskColumns}*/}
        {/*  dataSource={onTableData(productInfo)}*/}
        {/*/>*/}
        {/*<CustomCard title="支付风险等级" style={{ marginBottom: 20 }} />*/}
        {/*<AntTable*/}
        {/*  bordered*/}
        {/*  columns={riskLevelColumns}*/}
        {/*  dataSource={onTableData(productInfo)}*/}
        {/*/>*/}
      </div>
    )
  }

  renderAuditTab() {
    const { auditRecord = {} } = this.state

    return (
      <div>
        <Descriptions>
          <Descriptions.Item label="审批时间" span={3}>
            {auditRecord.approveTime}
          </Descriptions.Item>
          <Descriptions.Item label="审批人" span={3}>
            {auditRecord.approveUserName}
          </Descriptions.Item>
          <Descriptions.Item label="审批结果" span={3}>
            {AuditStatus[auditRecord.approveStatus]}
          </Descriptions.Item>
          {auditRecord.approveStatus === '02' && (
            <Descriptions.Item label="拒绝类型" span={3}>
              {AuditReason[auditRecord.refuseType]}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="小记" span={3}>
            {auditRecord.remark}
          </Descriptions.Item>
        </Descriptions>
      </div>
    )
  }

  renderExpressTab() {
    const { receiptExpressInfo, giveBackExpressInfo } = this.props
    return (
      <div>
        {giveBackExpressInfo ? (
          <>
            <Descriptions title={<CustomCard title="归还物流信息" />}>
              <Descriptions.Item label="发货物流公司">
                {giveBackExpressInfo.expressCompany}
              </Descriptions.Item>
              <Descriptions.Item label="发货物流单号">
                {giveBackExpressInfo.expressNo}
              </Descriptions.Item>
              <Descriptions.Item label="归还时间">
                {giveBackExpressInfo.deliveryTime}
              </Descriptions.Item>
            </Descriptions>
            <Button
              onClick={() =>
                this.onLogistics('归还物流信息', giveBackExpressInfo)
              }
            >
              查看物流
            </Button>
            <Divider />
          </>
        ) : null}
        {receiptExpressInfo ? (
          <>
            <Descriptions title={<CustomCard title="发货物流信息" />}>
              <Descriptions.Item label="发货物流公司">
                {receiptExpressInfo.expressCompany}
              </Descriptions.Item>
              <Descriptions.Item label="发货物流单号">
                {receiptExpressInfo.expressNo}
              </Descriptions.Item>
              <Descriptions.Item label="发货时间">
                {receiptExpressInfo.deliveryTime}
              </Descriptions.Item>
            </Descriptions>
            <Button
              onClick={() =>
                this.onLogistics('发货物流信息', receiptExpressInfo)
              }
            >
              查看物流
            </Button>
            <Divider />
          </>
        ) : null}
      </div>
    )
  }

  renderBillTab() {
    const {
      userOrderCashesDto = {},
      orderByStagesDtoList = [],
      orderBuyOutDto = {},
      settlementInfoDto = {},
      orderAdditionalServicesDtoList = {},
    } = this.state.queryOrderStagesDetail
    const { amountInfoDto } = this.props
    const {
      userOrderInfoDto = {},
      productInfo,
    } = this.props

    let { getFieldDecorator } = this.props.form
    let mySalePrice = productInfo.length > 0 ? (productInfo[0].salePrice) : 0;
    let myPaiedPrice = 0; //未还金额
    let myPeriods = 0; //未还期数
    let myTotalRent = orderByStagesDtoList.length>0 ?  orderByStagesDtoList[0].totalRent : 0;
    let myPeriodsRent = orderByStagesDtoList.length>0 ?  orderByStagesDtoList[0].currentPeriodsRent : 0;
    let myOverdueFee = 0;
  
    //已还金额
    orderByStagesDtoList.map(item => {
      if(item.status === '1'){
        myPaiedPrice += item.currentPeriodsRent;
        myPeriods += 1;
      }
    })

     //已还金额
    orderByStagesDtoList.map(item => {
      if(item.status === '1'){
        if(moment().unix() > moment(item.statementDate).unix()){
          myOverdueFee += Number(item.overdueFee);
        }
      }
    })
    

    const columnsByStages = [
      {
        title: '总期数',
        align: 'center',
        dataIndex: 'totalPeriods'
      },
      {
        title: '当前期数',
        align: 'center',
        dataIndex: 'currentPeriods'
      },
      {
        title: '租金',
        align: 'center',
        dataIndex: 'currentPeriodsRent',
        render: (value, row, index) => {
          return (
              <Form className={styles.orderDetail}>
                <FormItem style={{ margin: 0 }}>
                    {getFieldDecorator(`${index}[currentPeriodsRent]`, {
                      initialValue: value,
                      rules: [{ required: true, message: '不能为空' }]
                    })(
                      <Input
                          onChange={evt => this.changeCurrentPeriodsRent(evt)}
                          style={{display:!this.state[`currentPeriodsRent${index}`] ?'none':'block',width:'120px'}}
                      />

                    )}
                  {
                    <a  style={{display:this.state[`currentPeriodsRent${index}`] ?'none':'block'}} onClick={(evt)=>{this.editCurrentPeriodsRent(evt, index, row.id)}}>
                      <span style={{color:'#333',marginRight:'20px'}}>{value}</span>
                      <Icon type="edit" style={{fontSize:'16px',marginLeft:'10px'}}  />
                    </a>
                  }

                  {
                    <a  style={{display:!this.state[`currentPeriodsRent${index}`] ?'none':'block',position:'absolute',top:'-4px',left:'120px'}}>

                      <Icon type="check" style={{fontSize:'16px',marginLeft:'10px'}}  onClick={(evt)=>{this.currentPeriodsRent(value, index, row.id)}}/>
                    </a>
                  }
                  {
                    <a  style={{display:!this.state[`currentPeriodsRent${index}`] ?'none':'block',position:'absolute',top:'-4px',right:'-10px'}}>

                      <Icon type="close" style={{fontSize:'16px',marginLeft:'10px'}}  onClick={(evt)=>{this.currentPeriodsRentClose(value, index, row.id)}}/>
                    </a>
                  }
                </FormItem>
              </Form>
          )
        }
      },
      {
        title: '支付宝流水号',
        align: 'center',
        dataIndex: 'outTransNo'
      },

      {
        title: '支付时间',
        align: 'center',
        dataIndex: 'repaymentDate'
      },
      {
        title: '账单到期时间',
        align: 'center',
        dataIndex: 'statementDate'
      },
      {
        title: '逾期信息',
        align: 'center',
        dataIndex: 'overdueDays',
        render: (status, record) => {
          // '1': '待支付',
          //   '2': '已支付',
          //   '3': '逾期已支付',
          //   '4': '逾期待支付',
          //   '5': '已取消',
          //   '6': '已结算',
          //   '7': '已退款,可用',
          return (
            <>
              {record.overdueDays > 0 ? (
                <>
                  <span style={{ color: '#fa541c' }}>
                    逾期天数：{record.overdueDays}
                    <br />
                  </span>
                  <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                    逾期费：{record.overdueFee}
                    <br />
                  </span>
                  <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                  </span>
                  {/* <span
                    style={{
                      color: '#fa541c',
                      display: record.overdueFee > 0 ? '' : 'none'
                    }}
                  >
                    协商逾期费：
                    {record.businessOverdueFee < 0
                      ? '未设置'
                      : record.businessOverdueFee}
                    <br />
                  </span>
                  <Button
                    style={{
                      display:
                        record.overdueFee > 0 &&
                        record.overdueFeePayStatus !== '2'
                          ? ''
                          : 'none'
                    }}
                    type="primary"
                    size="small"
                    onClick={() => {
                      this.setState({ overdueId: record.id })
                      this.showOrderModal('overduefee')
                    }}
                  >
                    设置协商逾期费
                  </Button> */}
                </>
              ) : null}
            </>
          )
        }
      },
      {
        title: '操作',
        dataIndex: 'status',
        align: 'center', // render: status => <span>{columnsByStagesStute[status]}</span>,
        render: (status, record) => {
          const payedArry = ['1','2','3', '4','8']
          // '1': '待支付',
          //   '2': '已支付',
          //   '3': '逾期已支付',
          //   '4': '逾期待支付',
          //   '5': '已取消',
          //   '6': '已结算',
          //   '7': '已退款,可用',
          return (
              <>
                {
                  record.status === '2' ? (
                      <>
                  <span
                      style={{
                        color: payedArry.includes(record.status) ? '#E83F40' : ''
                      }}
                  >
                    已支付
                  </span>
                        <br />
                        <Popconfirm
                            title="是否对该期租金进行线下退款?"
                            onConfirm={() =>
                                this.billRefundOrder(
                                    record.orderId,
                                    record.currentPeriods,
                                    true
                                )
                            }
                        >
                          {/* <Button
                              style={{
                                display: payedArry.includes(record.status) ? '' : 'none'
                              }}
                              type="primary"
                              size="small"
                          >
                            线下退款
                          </Button> */}
                        </Popconfirm>
                      </>
                  ) : record.status === '3' ? (
                          <>
                  <span
                      style={{
                        color: payedArry.includes(record.status) ? '#E83F40' : ''
                      }}
                  >
                  逾期已支付
                  </span>
                            <br />
                            <Popconfirm
                                title="是否对该期租金进行线下退款?"
                                onConfirm={() =>
                                    this.billRefundOrder(
                                        record.orderId,
                                        record.currentPeriods,
                                        true
                                    )
                                }
                            >
                              {/* <Button
                                  style={{
                                    display: payedArry.includes(record.status) ? '' : 'none'
                                  }}
                                  type="primary"
                                  size="small"
                              >
                                线下退款
                              </Button> */}
                            </Popconfirm>
                          </>
                      )
                      : record.status === '8' ? (
                          <>
                  <span
                      style={{
                        color: payedArry.includes(record.status) ? '#E83F40' : ''
                      }}
                  >
                  线下履约
                  </span>
                            <br />
                            <Popconfirm
                                title="是否对该期租金进行线下退款?"
                                onConfirm={() =>
                                    this.billRefundOrder(
                                        record.orderId,
                                        record.currentPeriods,
                                        true
                                    )
                                }
                            >
                              {/* <Button
                                  style={{
                                    display: payedArry.includes(record.status) ? '' : 'none'
                                  }}
                                  type="primary"
                                  size="small"
                              >
                                线下退款
                              </Button> */}
                            </Popconfirm>
                          </>
                      ) : (
                          <>
                  <span
                      style={{
                        color: payedArry.includes(record.status) ? '#E83F40' : ''
                      }}
                  >
                    {record.debitStatus == '2' ? '扣款处理中' : columnsByStagesStute[record.status]}
                  </span>
                            <br />
                            {
                              record.debitStatus !== '2' ? (
                                <div>
                                <Popconfirm
                                title="是否对该期租金进行线上代扣?"
                                onConfirm={() =>
                                    this.paidPeriodOrder(
                                        record.orderId,
                                        record.currentPeriods,
                                        false
                                    )
                                }
                            >
                              <Button
                                  style={{
                                    display: payedArry.includes(record.status) ? '' : 'none'
                                  }}
                                  type="primary"
                                  size="small"
                              >
                                线上代扣
                              </Button>
                            </Popconfirm>
                            <Popconfirm
                                title="是否对该期租金进行线下履约?"
                                onConfirm={() =>
                                    this.paidPeriodOrder(
                                        record.orderId,
                                        record.currentPeriods,
                                        true
                                    )
                                }
                            >
                              <Button
                                  style={{
                                    display: payedArry.includes(record.status) ? '' : 'none'
                                  }}
                                  type="primary"
                                  size="small"
                              >
                                线下履约
                              </Button>
                            </Popconfirm>
                            </div>
                              )
                              : null
                            }
                          </>
                      )}
              </>
          )
        }
      },
    ]
      // 增值服务
//增值服务--碎屏险--未支付，调代扣接口
     const orderServicePay = (orderid, serviceId,type) => {
          const { dispatch } = this.props
          dispatch({
              type: 'order/orderServicePay',
              payload: {
                  orderId: orderid,
                serviceId: serviceId,
                offlinedFlag:type
              },
              callback: res => {
                  message.success('扣款请求成功,请稍后刷新页面查看。')
                  this.queryOrderStatges()
              }
          })
      }
//增值服务--碎屏险--已支付，线下退款
    const orderServiceRefund = (orderid, serviceId,type) => {
          const { dispatch } = this.props
          dispatch({
              type: 'order/orderServiceRefund',
              payload: {
                  orderId: orderid,
                  serviceId: serviceId,
                  offlinedFlag:type
              },
              callback: res => {
                  message.success('退款请求成功,请稍后刷新页面查看。')
                  this.queryOrderStatges()
              }
          })
      }
      const columnsAddService = [
          {
              title: '费用名称',
              align: 'center',
              dataIndex: 'shopAdditionalServicesName'
          },
          {
              title: '金额',
              dataIndex: 'price',
              align: 'center',
              width:'20%',
              render: (value, row, index) => {
                  return (
                      <Form>
                          <FormItem style={{ margin: 0 }}>
                              {getFieldDecorator(`${index}[price]`, {
                                  initialValue: value,
                                  rules: [{ required: true, message: '不能为空' }]
                              })(
                                  <Input
                                      onChange={evt => this.changePrice(evt)}
                                      style={{display:!this.state[`servicePrice${index}`] ?'none':'block',width:'120px'}}
                                  />
                              )}
                            {
                              <a  style={{display:this.state[`servicePrice${index}`] ?'none':'block'}} onClick={(evt)=>{this.editServicePrice(evt, index, row.id)}}>
                                <span style={{color:'#333',marginRight:'20px'}}>{value}</span>
                                <Icon type="edit" style={{fontSize:'16px',marginLeft:'10px'}}  />
                              </a>
                            }

                            {
                              <a  style={{display:!this.state[`servicePrice${index}`] ?'none':'block',position:'absolute',top:'-4px',left:'120px'}}>

                                <Icon type="check" style={{fontSize:'16px',marginLeft:'10px'}}  onClick={(evt)=>{this.updatePriceByOrderAdditionalServicesId(value, index, row.id)}}/>
                              </a>
                            }
                            {
                              <a  style={{display:!this.state[`servicePrice${index}`] ?'none':'block',position:'absolute',top:'-4px',right:'110px'}}>

                                <Icon type="close" style={{fontSize:'16px',marginLeft:'10px'}}  onClick={(evt)=>{this.priceClose(value, index, row.id)}}/>
                              </a>
                            }
                          </FormItem>
                      </Form>
                  )
              }
          },
          {
              title: '状态',
              dataIndex: 'status',
              align: 'center',
              render:(status,record) =>{
                  return (
                      <>
                          {
                              status === '0' || status === null?(
                                  <span>未支付</span>
                              ):status ==='1'?(
                                  <span>已支付</span>
                              ):status==='2'?(
                                  <span>已退款</span>
                              ):status==='3'?(
                                  <span>线下履约</span>
                              ):(
                                  <span>线下已退款</span>
                              )
                          }
                      </>
                  )
              }
          },
          {
              title: '支付流水号',
              align: 'center',
              dataIndex: 'outTradeNo'
          },
          {
              title: '操作',
              dataIndex: 'status',
              align: 'center',
              render: (status, record) => {
                  return (
                      <>
                          {status === '0' || status === null
                              ?( <div>
                                <Popconfirm
                                    title="是否线上代扣?"
                                    onConfirm={() =>
                                        orderServicePay(
                                            record.orderId,
                                            record.shopAdditionalServicesId,
                                           false
                                        )
                                    }
                                >
                                  {/* <span>未支付</span> */}
                                  <Button
                                      type="primary"
                                      size="small"
                                  >
                                    线上代扣
                                  </Button>
                                </Popconfirm>
                               &nbsp;
                                <Popconfirm
                                    title="是否线下履约?"
                                    onConfirm={() =>
                                      orderServiceRefund(
                                            record.orderId,
                                            record.shopAdditionalServicesId,
                                            true
                                        )
                                    }
                                >
                                  <Button
                                      type="primary"
                                      size="small"
                                  >
                                   线下履约
                                  </Button>
                                </Popconfirm>
                              </div>)
                              : status == '1'
                                  ?   (
                                    <>
                                  <Popconfirm
                                    title="是否立即退还增值服务?"
                                    onConfirm={() =>
                                      orderServiceRefund(
                                            record.orderId,
                                            record.shopAdditionalServicesId,
                                            false
                                        )
                                    }
                                >
                                  <Button
                                      type="primary"
                                      size="small"
                                  >
                                   线上退款
                                  </Button>
                                </Popconfirm>
                                <Popconfirm
                                      title="是否线下退款?"
                                      onConfirm={() =>
                                          orderServiceRefund(
                                              record.orderId,
                                              record.shopAdditionalServicesId,
                                              true
                                          )
                                      }
                                  >
                                      <Button
                                          type="primary"
                                          size="small"
                                      >
                                          线下退款
                                      </Button>
                                  </Popconfirm>
                                  </>)
                                  : status =='3'?(
                                    <>
                                     <Popconfirm
                                        title="是否立即退还增值服务?"
                                        onConfirm={() =>
                                          orderServiceRefund(
                                                record.orderId,
                                                record.shopAdditionalServicesId,
                                                false
                                            )
                                        }
                                    >
                                      <Button
                                          type="primary"
                                          size="small"
                                      >
                                      线上退款
                                      </Button>
                                    </Popconfirm>
                                      <Popconfirm
                                          title="是否线下退款?"
                                          onConfirm={() =>
                                             orderServiceRefund(
                                                  record.orderId,
                                                  record.shopAdditionalServicesId,
                                                  true
                                              )
                                          }
                                      >
                                        <Button
                                            type="primary"
                                            size="small"
                                        >
                                          线下退款
                                        </Button>
                                      </Popconfirm></>
                                  ):'已退款'
                          }
                      </>
                  )
              }

          },
      ]
    return (
      <Card bordered={false}>
        {settlementInfoDto ? (
          <>
            <CustomCard title="结算信息" style={{ marginBottom: 20 }} />
            <AntTable
              columns={this.columnsSettlement}
              dataSource={onTableData([settlementInfoDto])}
              paginationProps={paginationProps}
            />
          </>
        ) : null}

        <CustomCard title="账单信息" style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsBill}
          dataSource={onTableData([userOrderCashesDto])}
          paginationProps={paginationProps}
        />

{amountInfoDto ? (
          <>
            <Descriptions
              title={
                <>
                  <CustomCard title="已收金额信息" />
                </>
              }
            >
              <Descriptions.Item label="预授权冻结金额">
                {amountInfoDto && (amountInfoDto.authFreezeAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权解冻金额">
                {amountInfoDto && (amountInfoDto.authReleaseAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="预授权转支付的金额">
                {amountInfoDto && (amountInfoDto.authPayAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="增值服务金额">
                {amountInfoDto && (amountInfoDto.addServiceAmt || 0)}
              </Descriptions.Item>
              <Descriptions.Item label="押金总金额/期数">
                {amountInfoDto && (amountInfoDto.depositAmt || 0)}/
                {amountInfoDto && (amountInfoDto.period || 0)}期
              </Descriptions.Item>
            </Descriptions>
            <Divider />
          </>
        ) : null}

        { localStorage.getItem('businessType')!= 'RENT' ? (
          <>
           <CustomCard title="增值服务" style={{ marginBottom: 20 }} />
            <AntTable
              columns={columnsAddService}
              dataSource={orderAdditionalServicesDtoList}
              // dataSource={onTableData([orderAdditionalServicesDtoList])}
              paginationProps={paginationProps}
            />
          </>
        ) : null}

        <CustomCard title={`分期信息【当前买断价(${(Number(myPaiedPrice) + Number(mySalePrice - myTotalRent) + Number(myOverdueFee)).toFixed(2)}) = 未还租金：${(myPaiedPrice).toFixed(2)}（${myPeriodsRent} * ${myPeriods}期） + 到期买断款（${(mySalePrice - myTotalRent).toFixed(2)}）+ 罚息(${(myOverdueFee).toFixed(2)})】`} style={{ marginBottom: 20 }} />
        <AntTable
          columns={columnsByStages}
          dataSource={onTableData(orderByStagesDtoList)}
          paginationProps={paginationProps}
        />
        {orderBuyOutDto.orderId ? (
          <>
            <CustomCard title="买断信息" style={{ marginBottom: 20 }} />
            <AntTable
              columns={
                orderBuyOutDto.payFlag ? columnsBuyOutYes : columnsBuyOutNo
              }
              dataSource={onTableData([orderBuyOutDto])}
              paginationProps={paginationProps}
            />
          </>
        ) : null}
      </Card>
    )
  }

  renderProcessTab() {
    const { processDetail = [] } = this.state
    const { userOrderInfoDto = {} } = this.props
    return (
      <Card
        className="remove-card-bottom-border"
        title={<CustomCard title="订单进度" />}
        bordered={false}
      >
        <Steps
          direction="vertical"
          progressDot={document.body.clientWidth >= 1025}
          current={processDetail.length}
        >
          {processDetail.map(item => {
            const desc = (
              <div style={{ width: 300 }}>
                <div>{item.operatorName}</div>
                <div>{item.createTime}</div>
              </div>
            )
            return (
              <Step
                title={item.operate}
                key={item.operate}
                description={desc}
              />
            )
          })}
        </Steps>
      </Card>
    )
  }

  onFKTabChanged(activeKey) {
    // 阻止重复查看风控报告
    const currtnSelectedKey = localStorage.getItem('defaultActiveKey')
    if (currtnSelectedKey === activeKey) {
      return message.warning('请勿重复查看风控报告')
    }

    const { userOrderInfoDto } = this.props
    const id = userOrderInfoDto.uid
    this.setState(
      {
        defaultActiveKey: activeKey
      },
      async () => {
        localStorage.setItem('defaultActiveKey', this.state.defaultActiveKey)
        if (this.state.defaultActiveKey === '99') {
          getSiriusReportRecordV3({
            uid: id,
            orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            reportType: '02' // 获取天狼星 08 09 10
          }).then(res => {
            this.setState({
              tlxData: JSON.parse(res.data.reportResult)
            })
          })
        } else if (this.state.defaultActiveKey === '98') {
          getSiriusReportRecordV3({
            uid: id,
            orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            reportType: '08' // 获取天狼星 08 09 10
          }).then(res => {
            this.setState({
              tanchaData: JSON.parse(res.data.reportResult)
            })
          })
        } else if (this.state.defaultActiveKey === '97') {
          getSiriusReportRecordV3({
            uid: id,
            orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            reportType: '09' // 获取天狼星 08 09 10
          }).then(res => {
            this.setState({
              bdfData: JSON.parse(res.data.reportResult)
            })
          })
        } else if (this.state.defaultActiveKey === '96') {
          getSiriusReportRecordV3({
            uid: id,
            orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            reportType: '10' // 获取天狼星 08 09 10
          }).then(res => {
            this.setState({
              teshuData: JSON.parse(res.data.reportResult)
            })
          })
        } else if (this.state.defaultActiveKey === '95') {
          getSiriusReportRecordV3({
            uid: id,
            orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            reportType: '12' // 获取天狼星 08 09 10
          }).then(res => {
            if (res) {
              let sData = JSON.parse(res.data.reportResult)

              if (!sData.data) {
                this.setState({
                  seniorData: {}
                })
              } else {
                if (sData.code === 1) {
                  this.setState({
                    seniorData: {}
                  })
                } else {
                  if (sData.data.credit.code !== -1) {
                    this.setState({
                      seniorData: JSON.parse(res.data.reportResult)
                    })
                  } else {
                    this.setState({
                      seniorData: {}
                    })
                  }
                }
              }
            } else {
              this.setState({
                seniorData: {}
              })
            }
          })
        } else {
          this.props.dispatch({
            type: 'order/getCreditV3',
            payload: {
              uid: id,
              orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
              reportType: '03'
            },
            callback: res => {
              if (res.data.reportResult) {
                const { data } = JSON.parse(res.data.reportResult)
                this.setState({
                  xyData1: JSON.parse(data)
                })
              } else {
                this.setState({
                  xyData1: {}
                })
              }
            }
          })
          this.props.dispatch({
            type: 'order/getCreditV3',
            payload: {
              uid: id,
              orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
              reportType: '04'
            },
            callback: res => {
              const { data } = JSON.parse(res.data.reportResult)
              if (data) {
                this.setState({
                  xyData2: JSON.parse(data)
                })
              }
            }
          })
        }
      }
    )
  }

  renderContentTabCard() {
    const { userOrderInfoDto } = this.props
    const {
      activeTab,
      redata,
      reType,
      xyData1,
      xyData2,
      xyData3,
      brData1,
      brData2,
      defaultActiveKey,
      visibleRiskCheck
    } = this.state
    const status = userOrderInfoDto.status

    const stylesDivForViewReport = {
      padding: 10,
      display: 'inline-block',
      borderRadius: 35,
      lineHeight: '15px',
      cursor: 'pointer',
      marginRight: 20,
      fontSize: 14,
      marginBottom: 15
    }
    const reportNameItem = { color: '#666' }

    // 顶部报告tab项
    const TopReportTab = [
      {
        key: '21',
        reportTagName: '风控A',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '新颜探针雷达'
      },
      {
        key: '99',
        reportTagName: '风控B',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '布尔天狼星'
      },
      {
        key: '98',
        reportTagName: '风控C',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '贷款信用探查'
      },
      {
        key: '97',
        reportTagName: '风控D',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '反欺诈分'
      },
      {
        key: '96',
        reportTagName: '风控E',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '特殊关注名单'
      },
      {
        key: '95',
        reportTagName: '风控F',
        defaultColor: '#666',
        activeColor: '#3296fa',
        reportName: '新颜雷达探针（提补版）'
      }
    ]

    const showColorByKey = ({ key, activeColor, defaultColor }) => {
      return defaultActiveKey === key ? activeColor : defaultColor
    }

    return (
      <Card bordered={false} style={{ marginTop: 20 }}>
        <Tabs activeKey={activeTab} onChange={this.tabChange}>
          <TabPane tab="订单信息" key="1">
            {this.renderOrderInfoTab()}
          </TabPane>
          {/*{!['02', '01'].includes(status) ? (<TabPane tab="风险报告" key="2">*/}
          {/*暂时开放所有人查看风险报告，理论上未支付的订单不允许查看*/}

          {/* <TabPane tab="风险报告" key="2">
            <div style={{ paddingLeft: 100, fontSize: 15 }}>
              <h4>请选择您要查看的风控报告：</h4>
              {TopReportTab.map(item => (
                <div
                  key={item.key}
                  style={{
                    ...stylesDivForViewReport,
                    border: `1px solid ${showColorByKey(item)}`
                  }}
                  onClick={() => this.onFKTabChanged(item.key)}
                >
                  <span style={{ color: showColorByKey(item) }}>
                    {item.reportTagName}：
                  </span>
                  <span
                    style={{
                      color: `${showColorByKey(item)}`
                    }}
                  >
                    {item.reportName}
                  </span>
                </div>
              ))}
            </div> */}
            {/* {this.renderRiskTab()} */}
            {/* <Tabs
              activeKey={this.state.defaultActiveKey}
              defaultActiveKey={this.state.defaultActiveKey}
              tabPosition="left"
              onChange={e => this.onFKTabChanged(e)}
            > */}
              {/* <Tabs.TabPane tab="布尔" key="21">
              {reType === '01' ? (<BooleanReport1 redata={redata}/>) : // 星耀版 reType-02
                (<BooleanReport2 redata={redata}/>)}
            </Tabs.TabPane> */}
              {/* <Tabs.TabPane tab="风控A" key="21">
                <XinyanReport xydata1={xyData1} xydata2={xyData2} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控B" key="22">
                <BairongReport brdata1={brData1} brdata2={brData2} />
              </Tabs.TabPane> */}
              {/* <Tabs.TabPane tab="风控A" key="21"> */}
                {/*  xydata3={xyData3} */}
                {/* <XinyanReport xydata1={xyData1} xydata2={xyData2} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控B" key="99">
                <TianLangXingReport tlxData={this.state.tlxData} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控C" key="98">
                <TanChaReport tanchaData={this.state.tanchaData} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控D" key="97">
                <BeiDuoFen bdfData={this.state.bdfData} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控E" key="96">
                <TeShuReport teshuData={this.state.teshuData} />
              </Tabs.TabPane>
              <Tabs.TabPane tab="风控F" key="95">
                <SeniorCreditRisk seniorData={this.state.seniorData} />
              </Tabs.TabPane>
            </Tabs>
          </TabPane> */}
          
          <TabPane tab="在途订单" key="7">
            {this.renderPayedOrder()}
          </TabPane>
          {/*</TabPane>) : null}*/}
          {/* {!['01', '02', '11'].includes(status) ? (
            <TabPane tab="审批结论" key="3">
              {this.renderAuditTab()}
            </TabPane>
          ) : null} */}
          {!['01', '02', '04', '11'].includes(status) ? (
            <TabPane tab="物流信息" key="4">
              {this.renderExpressTab()}
            </TabPane>
          ) : null}
          <TabPane tab="账单信息" key="5">
            {this.renderBillTab()}
          </TabPane>
          {getParam('settlement') ? (
            <TabPane tab="催收记录" key="10">
              {this.renderCollectionRecord()}
            </TabPane>
          ) : null}

          <TabPane tab="流程进度" key="6">
            {this.renderProcessTab()}
          </TabPane>
        </Tabs>
      </Card>
    )
  }

  renderCollectionRecord() {
    const { orderVisible } = this.state
    // console.log(orderVisible === 'remarks', 'orderVisibleorderVisible');
    const { getFieldDecorator } = this.props.form
    return (
      <div>
        <CustomCard title="商家催收" style={{ marginBottom: 20 }} />
        <MyPageTable
          onPage={this.onHastenBusiness}
          columns={BusinessCollection}
          dataSource={onTableData(this.state.HastenList)}
          paginationProps={{
            current: this.state.HastenCurrent,
            pageSize: 3,
            total: this.state.HastenTotal
          }}
        />
        <CustomCard title="平台催收" style={{ marginBottom: 20 }} />
        <MyPageTable
          onPage={this.onHastenOpe}
          columns={BusinessCollection}
          dataSource={onTableData(this.state.opeHastenList)}
          paginationProps={{
            current: this.state.opeHastenCurrent,
            pageSize: 3,
            total: this.state.opeHastenTotal
          }}
        />
      </div>
    )
  }

  renderCollectionRecordModal() {
    const { orderVisible } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')

    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['jg', 'xj'], (err, values) => {
        if (!err) {
          orderService
            .orderHasten({ orderId, notes: values.xj, result: values.jg })
            .then(res => {
              this.onHasten(1, 3, '02')
              this.handleCancel()
            })
        }
      })
    }

    return (
      <Modal
        title="记录催收"
        visible={orderVisible === 'remarks'}
        onOk={handleOk}
        onCancel={this.handleCancel}
        destroyOnClose
      >
        <Form>
          <Form.Item label="结果" {...formItemLayout}>
            {getFieldDecorator('jg', {
              rules: [{ required: true, message: '请选择结果' }]
            })(
              <Select style={{ width: '100%' }} placeholder="请选择结果">
                <Option value="01">承诺还款</Option>
                <Option value="02">申请延期还款</Option>
                <Option value="03">拒绝还款</Option>
                <Option value="04">电话无人接听</Option>
                <Option value="05">电话拒接</Option>
                <Option value="06">电话关机</Option>
                <Option value="07">电话停机</Option>
                <Option value="08">客户失联</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="小记" {...formItemLayout}>
            {getFieldDecorator('xj', {
              rules: [{ required: true, message: '请输入小记' }]
            })(<TextArea placeholder="请输入" />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

  renderRemarkModal() {
    const { orderVisible } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['beizhu'], (err, values) => {
        if (!err) {
          const { dispatch } = this.props
          dispatch({
            type: 'order/orderRemark',
            payload: {
              orderId,
              remark: values.beizhu,
              orderType: '01'
            },
            callback: res => {
              this.onPageBusiness()
              this.handleCancel()
              this.props.form.resetFields()
            }
          })
        }
      })
    }

    return (
      <div>
        <Modal
          title="备注"
          visible={orderVisible === 'remark'}
          onOk={handleOk}
          onCancel={this.handleCancel}
        >
          <Form>
            <Form.Item label="备注内容" {...formItemLayout}>
              {getFieldDecorator('beizhu', {
                rules: [{ required: true, message: '请输入备注' }]
              })(<TextArea placeholder="请输入" />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
  renderSelectProduct() {
    const { productModalVisible, freeTypes, depositPeriod } = this.state
    const { getFieldDecorator } = this.props.form
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    const handleOk1 = e => {
      e.preventDefault()
      this.props.form.validateFields(['productPackage','color','spec','productId'],(err, values) => {

        if (!err) {
          // map 循环；特点：有返回值（需要对数组里面的对象，你要特殊组装的时候，特别有用）有返回值的（新数组，不会更改原数组）
          this.state.selectProductByProducetDetail?.productSkuses.forEach(sku => {
            let specIds = sku.specAll.map(spec => spec.platformSpecId);
            if (specIds.includes(values.productPackage) && specIds.includes(values.color) && specIds.includes(values.spec)) {
              const { dispatch } = this.props
              console.log(this.state.skuId,'skuId')
              dispatch({
                type: 'order/changeProductForOrder',
                payload: {
                  orderId,
                  skuId:sku.skuId,
                  needPayDeposit: freeTypes.includes(2) ? 1  : 0 ,//是否支付押金
                  depositPeriod: freeTypes.includes(2) ? depositPeriod : 0,//期数
                  needPayScreenAssurance: freeTypes.includes(1) ? 1  : 0 ,//是否需要支付碎片保险
                  productId:this.state.selectProductByProducetDetail?.productId
                },
                callback: res => {
                  this.onRentRenewalDetail()
                  this.queryOrderStatges()
                  this.onPageBusiness()
                  this.handleCancel()
                  this.props.form.resetFields()
                }
              })
            }
          })

        }
      })
    }
    const changeProductId = (e) =>{
      if(e.keyCode === 13){
        this.apiProductModal(e.target.value)
      }
    }

    const handleChangeFree = (e) => {
      this.setState({
        freeTypes: e
      })
      console.log(this.state.freeTypes);
    }

    //选择期数
    const handleChangePeriod = (e) => {
      this.setState({
        depositPeriod: e
      })
      console.log(this.state.depositPeriod);
    }

    return (
        <div>
          <Modal
              title="套餐变更"
              visible={this.state.productModalVisible}
              onOk={handleOk1}
              onCancel={this.handleCancel}
          >
            <Form>
              <Form.Item label="产品编号" {...formItemLayout}>
                {getFieldDecorator('productId', {
                  rules: [{ required: true, message: '请输入产品编号' }],
                  initialValue:this.state.selectProductByProducetDetail && this.state.selectProductByProducetDetail.productId
                })(<Input placeholder="请输入"
                          onPressEnter={changeProductId}
                />)}
              </Form.Item>
              <Form.Item label="商品名称" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '请输入' }],
                  initialValue:this.state.selectProductByProducetDetail && this.state.selectProductByProducetDetail.name
                })(<Input placeholder="请输入" disabled={true} />)}
              </Form.Item>
              <Form.Item label="套餐名称" {...formItemLayout}>
                {getFieldDecorator('productPackage', {
                  rules: [{ required: true, message: '请选择套餐' }]
                })(
                    <Select style={{ width: '100%' }} placeholder="请选择套餐">
                      {this.state.productPackage && this.state.productPackage.values.map(option => {
                          return (
                              <Option key={option.productSpecId} value={option.productSpecId}>
                                {option.name}
                              </Option>
                          );
                      })}
                    </Select>
                )}
              </Form.Item>
              <Form.Item label="颜色" {...formItemLayout}>
                {getFieldDecorator('color', {
                  rules: [{ required: true, message: '请选择颜色' }],
                })(<Select style={{ width: '100%' }} placeholder="请选择颜色">
                  {this.state.colorSpecs && this.state.colorSpecs.values.map(option => {
                    return (
                        <Option key={option.productSpecId} value={option.productSpecId}>
                          {option.name}
                        </Option>
                    )
                  })}
                </Select>)}
              </Form.Item>
              <Form.Item label="规格" {...formItemLayout}>
                {getFieldDecorator('spec', {
                  rules: [{ required: true, message: '请选择规格' }]
                })(
                    (<Select style={{ width: '100%' }} placeholder="请选择规格">
                      {this.state._specs && this.state._specs.values.map(option => {
                        return (
                            <Option key={option.productSpecId} value={option.productSpecId}>
                              {option.name}
                            </Option>
                        )
                      })}
                    </Select>)
                )}
              </Form.Item>
             
              <Form.Item label="成色" {...formItemLayout}>
                {getFieldDecorator('oldNewDegree', {
                  rules: [{ required: true, message: '请输入成色' }],
                  initialValue:this.state.selectProductByProducetDetail?.oldNewDegree
                })( <Select
                    placeholder="请选择新旧"
                    onChange={v => handleChange('oldNewDegree', v)}
                    disabled={true}
                >
                  <Option value={1}>全新</Option>
                  <Option value={2}>99新</Option>
                  <Option value={3}>95新</Option>
                  <Option value={4}>9成新</Option>
                  <Option value={5}>8成新</Option>
                  <Option value={6}>7成新</Option>
                </Select>)}
              </Form.Item>
              <Form.Item label="账单周期类型" {...formItemLayout}>
                {getFieldDecorator('rentPeriodsType', {
                  rules: [{ required: true, message: '请输入账单周期类型' }],
                  initialValue:this.state.selectProductByProducetDetail?.rentPeriodsType
                })(<Select
                    placeholder="请选择账单周期类型"
                    onChange={v => handleChange('oldNewDegree', v)}
                    disabled={true}
                >
                  <Option value={3}>月</Option>
                  <Option value={2}>周</Option>
                  <Option value={1}>天</Option>
                </Select>)}
              </Form.Item>
              <Form.Item label="账单总期数" {...formItemLayout}>
                {getFieldDecorator('rentPeriods', {
                  rules: [{ required: true, message: '请输入账单总期数' }],
                  initialValue:this.state.selectProductByProducetDetail?.rentPeriods
                })(<Input disabled={true} placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="账单每期数量" {...formItemLayout}>
                {getFieldDecorator('rentDays', {
                  rules: [{ required: true, message: '请输入账单每期数量' }],
                  initialValue:this.state.selectProductByProducetDetail?.rentDays
                })(<Input placeholder="请输入" disabled={true} />)}
              </Form.Item>
              <Form.Item label="费用选项" {...formItemLayout}>
                <Select
                    mode="multiple"
                    allowClear
                    placeholder="请选择费用选项"
                    onChange={handleChangeFree}
                  >
                  <Option value={1}>增值服务</Option>
                  <Option value={2}>押金</Option>
                </Select>
              </Form.Item>
              {/* {
                this.state.freeTypes.includes(1) ? 
                (<Form.Item label="增值服务" {...formItemLayout}>
                  {getFieldDecorator('content', {
                    // rules: [{ required: true, message: '请输入增值服务' }],
                    // initialValue:this.state.selectProductByProducetDetail?.additionals[0]?.shopAdditionalServices?.content +'￥'+
                    // this.state.selectProductByProducetDetail?.additionals[0]?.shopAdditionalServices?.price
                  })(
                      <Input placeholder="无" disabled={true} />)}
                </Form.Item>)
                : null
              } */}
              {
                this.state.freeTypes.includes(2) ? (
                  <Form.Item label="加押期数" {...formItemLayout}>
                    <Select
                        placeholder="请选择期数"
                        onChange={handleChangePeriod}
                      >
                      <Option value={1}>1期</Option>
                      <Option value={2}>2期</Option>
                      <Option value={3}>3期</Option>
                      <Option value={4}>4期</Option>
                      <Option value={5}>5期</Option>
                      <Option value={6}>6期</Option>
                      <Option value={7}>7期</Option>
                      <Option value={8}>8期</Option>
                      <Option value={9}>9期</Option>
                      <Option value={10}>10期</Option>
                      <Option value={11}>11期</Option>
                      <Option value={12}>12期</Option>
                    </Select>
                  </Form.Item>
                ) : null 
              }
            </Form>
          </Modal>
        </div>
    )
  }
  renderDeliverModal() {
    const { form } = this.props
    const { orderVisible, deliverOptions, logisticsFileUrl, uploading } = this.state
    const { getFieldDecorator } = form
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(
        ['expressId', 'expressNo','purchasePrice','logisticsFileUrl'],
        (err, fieldsValue) => {
          if (err) return
          OrderService.orderDelivery({
            ...fieldsValue,
            logisticsFileUrl: logisticsFileUrl,
            orderId
          }).then(res => {
            this.onRentRenewalDetail()
            form.resetFields()
            this.handleCancel()
          })
        }
      )
    }
    // 限制用户上传大小与格式
    const beforeUpload = file => {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/gif'
      if (!isJPG) {
        message.error('图片格式不正确')
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        message.error('图片大于10MB')
      }
      return isJPG && isLt2M
    }

    const handleUploadChange = (info) => {
      const { fileList, file } = info
      if (file.status === 'uploading') {
        this.setState({ uploading: true })
      }
  
      if (info.file.status === 'done') {
        const _data = info.file.response.data
        this.setState({
          logisticsFileUrl: _data,
          uploading: false
        })
      }
    }

    return (
      <Modal
        maskClosable={false}
        destroyOnClose
        title={orderVisible === 'express' ? '修改物流信息' : '快速发货'}
        visible={orderVisible === 'deliver' || orderVisible === 'express'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          {/* {this.props.contractUrl ? null : (
            <div style={{ color: '#E83F40', marginBottom: 10 }}>
              注意：该订单尚未签约存证，发货后无法签约，请确认！
            </div>
          )} */}
          <FormItem label="物流公司">
            {form.getFieldDecorator('expressId', {
              rules: [{ required: true, message: '请选择物流公司' }]
            })(
              <Select style={{ width: '100%' }} placeholder="请选择物流公司" disabled={orderVisible === 'deliver'}>
                {deliverOptions.map(option => {
                  return (
                    <Option key={option.id} value={option.id}>
                      {option.name}
                    </Option>
                  )
                })}
              </Select>
            )}
          </FormItem>
          <FormItem label="物流单号">
            {form.getFieldDecorator('expressNo', {
              rules: [{ required: true, message: '请输入物流单号' }]
            })(<Input placeholder="请输入物流单号"/>)}
          </FormItem>
          <FormItem label="进货价">
            {form.getFieldDecorator('purchasePrice', {
              rules: [{ required: true, message: '请输入进货价' }]
            })(
            <InputNumber
                min={0}
                precision={2}
                prefix="￥"
                style={{
                  width: '100%',
                }}
                placeholder="请输入进货价"
              />
            )}
          </FormItem>
          <FormItem label="发货商品照片">
            {form.getFieldDecorator('logisticsFileUrl')(
              <Upload
                accept="image/*"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                headers={{
                  token: getToken()
                }}
                beforeUpload={beforeUpload}
                onChange={info => handleUploadChange(info)}
                action={uploadUrl}
              >
                {logisticsFileUrl ? (
                  <img src={logisticsFileUrl} className="table-cell-img" />
                ) : (
                  <Fragment>
                    <Icon type={uploading ? 'loading' : 'upload'} />
                    <div className="ant-upload-text">上传照片</div>
                  </Fragment>
                )}
              </Upload>
            )}
          </FormItem>
        </Form>
      </Modal>
    )
  }

   // 打印面单机快递单
   renderPasterModal() {
    const { form } = this.props
    const { orderVisible, deliverLoading } = this.state
    const handleOk = e => {
      this.props.form.validateFields(['imeiSn'], (err, fieldsValue) => {
        if (err) return
        this.setState({
          deliverLoading: true
        })
        OrderService.createExpressNo({
          orderId: getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
          imeiSn: fieldsValue.imeiSn
        }).then(res => {
          form.setFieldsValue({
            expressId: 7,
            expressNo: res
          })
          this.setState({
            orderVisible: 'deliver',
            deliverLoading: false
          })
        })
      })
    }

    return (
      <Modal
        destroyOnClose
        title="打印面单机快递单"
        visible={orderVisible === 'paster'}
        width="450px"
        footer={[
          <Button key="back" onClick={this.handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" loading={deliverLoading} onClick={handleOk}>
            确定
          </Button>
        ]}
      >
        <Form>
          <FormItem label="唯一设备码">
            {form.getFieldDecorator('imeiSn', {
              rules: [{ required: true, message: '请输入IMEI/SN码' }]
            })(<Input placeholder="请输入IMEI/SN码"/>)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  renderCloseModal() {
    // 关闭订单
    const { form } = this.props
    const { orderVisible, orderId } = this.state

    const handleOk = e => {
      this.props.form.validateFields(['closeReason'], (err, fieldsValue) => {
        if (err) return
        OrderService.businessClosePayedOrder({
          ...fieldsValue,
          closeType: '06',
          orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
        }).then(res => {
          this.onRentRenewalDetail()
          this.queryOrderStatges()
          this.props.form.resetFields()
          this.handleCancel()
        })
      })
    }

    return (
      <Modal
        destroyOnClose
        title={'关闭订单'}
        visible={orderVisible === 'close'}
        onOk={_.debounce(handleOk, 1000)}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          {/*<FormItem>*/}
          {/*  {form.getFieldDecorator(*/}
          {/*    'closeType',*/}
          {/*    {*/}
          {/*      rules: [*/}
          {/*        {required: true, message: '请选择关单类型'}*/}
          {/*      ]*/}
          {/*    },*/}
          {/*  )(*/}
          {/*    <Radio.Group>*/}
          {/*      <Radio value={'06'}>客户要求关单</Radio>*/}
          {/*      <Radio value={'07'}>商家风控关单</Radio>*/}
          {/*    </Radio.Group>,*/}
          {/*  )}*/}
          {/*</FormItem>*/}
          <FormItem label="小记">
            {form.getFieldDecorator(
              'closeReason',
              {}
            )(<Input placeholder="请输入关单原因" />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  // 关闭未支付订单
  renderUnpayCloseModal() {
    const { form } = this.props
    const { orderVisible, orderId } = this.state
    const handleOk = e => {
      this.props.form.validateFields(['closeReason'], (err, fieldsValue) => {
        if (err) return
        OrderService.businessCloseUnPayOrder({
          ...fieldsValue,
          closeType: '06',
          orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
        }).then(res => {
          this.onRentRenewalDetail()
          this.queryOrderStatges()
          this.props.form.resetFields()
          this.handleCancel()
        })
      })
    }

    return (
      <Modal
        destroyOnClose
        title="关闭未支付订单"
        visible={orderVisible === 'unpayClose'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          <FormItem label="小记">
            {form.getFieldDecorator(
              'closeReason',
              {}
            )(<Input placeholder="请输入关单原因" />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  renderSettleModal() {
    const { form, userOrderCashesDto = {} } = this.props
    const { orderId, orderVisible, radioValue, damageValue } = this.state

    const onRadioChange = e => {
      this.setState({
        radioValue: e.target.value
      })
    }

    const handleDamageValue = val => {
      this.setState({
        damageValue: val
      })
    }

    const handleOk = e => {
      this.props.form.validateFields(
        ['penaltyAmount', 'cancelReason'],
        (err, fieldsValue) => {
          if (err) return
          const payload = {
            lossAmount: 0,
            damageAmount: 0,
            penaltyAmount: 0,
            settlementType: radioValue,
            ...fieldsValue,
            orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
          }
          if (radioValue === '03') {
            payload.lossAmount = damageValue
          } else if (radioValue === '02') {
            payload.damageAmount = damageValue
          }
          OrderService.merchantsIssuedStatements(payload).then(res => {
            this.onRentRenewalDetail()
            this.props.form.resetFields()
            this.handleCancel()
          })
        }
      )
    }

    return (
      <Modal
        title="是否确认结算？"
        zIndex={2000}
        visible={orderVisible === 'settle'}
        onOk={handleOk}
        onCancel={this.handleCancel}
      >
        <div>
          <div>
            <span style={{ marginRight: '20px' }}>宝贝状态</span>
            <Radio.Group onChange={onRadioChange} value={radioValue}>
              <Radio value="01">完好</Radio>
              <Radio value="02">损坏</Radio>
              <Radio value="03">丢失</Radio>
              <Radio value="04">其他</Radio>
            </Radio.Group>
            {radioValue === '02' && (
              <div style={{ display: 'inline-block', marginTop: '20px' }}>
                <span>损坏赔偿金：</span>
                <InputNumber
                  min={0}
                  defaultValue={0}
                  value={damageValue}
                  onChange={handleDamageValue}
                />
                <span>元</span>
              </div>
            )}
            {radioValue === '03' && (
              <div style={{ display: 'inline-block', marginTop: '20px' }}>
                <span>丢失赔偿金：</span>
                <InputNumber
                  min={0}
                  defaultValue={0}
                  value={damageValue}
                  onChange={handleDamageValue}
                />
                <span>元</span>
              </div>
            )}
            {radioValue === '04' && (
              <div style={{ marginTop: '20px' }}>
                <Form.Item labelCol={{ span: 4 }} label="违约金：">
                  {form.getFieldDecorator('penaltyAmount', {
                    initialValue: userOrderCashesDto.penaltyAmount
                  })(<InputNumber min={0} />)}
                  <span> 元</span>
                </Form.Item>
                <Form.Item labelCol={{ span: 4 }} label="违约原因：">
                  {form.getFieldDecorator('cancelReason', {
                    initialValue: userOrderCashesDto.cancelReason
                  })(
                    <Input
                      style={{ width: '60%' }}
                      placeholder="请输入违约原因"
                    />
                  )}
                </Form.Item>
              </div>
            )}
          </div>
        </div>
      </Modal>
    )
  }

  renderAddressModal() {
    const {
      userOrderInfoDto = {},
      orderAddressDto,
      dispatch,
      productInfo,
      userOrderCashesDto,
      orderBuyOutDto,
      wlList
    } = this.props
    const { orderVisible, orderId } = this.state
    const { getFieldDecorator } = this.props.form
    const handleOk = e => {
      this.props.form.validateFields(
        ['realName', 'street', 'city', 'telephone'],
        (err, values) => {
          if (err) return
          dispatch({
            type: 'order/opeOrderAddressModify',
            payload: {
              realName: values.realName,
              street: values.street,
              telephone: values.telephone,
              province: values && values.city && values.city[0],
              city: values && values.city && values.city[1],
              area: values && values.city && values.city[2],
              orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
            },
            callback: res => {
              this.onRentRenewalDetail()
              this.props.form.resetFields()
              this.handleCancel()
            }
          })
          // OrderService.businessClosePayedOrder({
          //   ...fieldsValue,
          //   orderId,
          // }).then(res => {
          //   this.onRentRenewalDetail()
          //   this.props.form.resetFields();
          //   this.handleCancel();
          // });
        }
      )
    }

    return (
      <Modal
        title="修改收货信息"
        visible={orderVisible === 'address'}
        onOk={handleOk}
        onCancel={this.handleCancel}
      >
        <Form>
          <Form.Item label="所在城市" {...formItemLayout}>
            {getFieldDecorator('city', {
              rules: [
                {
                  required: true,
                  message: '请输入备注'
                }
              ],
              initialValue: [
                orderAddressDto &&
                  orderAddressDto.province &&
                  orderAddressDto.province.toString(),
                orderAddressDto &&
                  orderAddressDto.city &&
                  orderAddressDto.city.toString(),
                orderAddressDto &&
                  orderAddressDto.area &&
                  orderAddressDto.area.toString()
              ]
            })(
              <Cascader
                options={optionsdata}
                fieldNames={{
                  label: 'name',
                  value: 'value',
                  children: 'subList'
                }}
              />
            )}
          </Form.Item>
          <Form.Item label="收货人姓名" {...formItemLayout}>
            {getFieldDecorator('realName', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.realname
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="收货人手机号" {...formItemLayout}>
            {getFieldDecorator('telephone', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.telephone
            })(<Input placeholder="请输入" />)}
          </Form.Item>
          <Form.Item label="详细地址" {...formItemLayout}>
            {getFieldDecorator('street', {
              rules: [{ required: true, message: '请输入备注' }],
              initialValue: orderAddressDto && orderAddressDto.street
            })(<TextArea placeholder="请输入" />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

  renderAuditModal() {
    const { form } = this.props
    const { orderVisible, orderId, titles } = this.state
    const handleOk = e => {
      this.props.form.validateFields(
        ['refuseType', 'auditRemark'],
        (err, fieldsValue) => {
          if (err) return
          OrderService.telephoneAuditOrder({
            ...fieldsValue,
            orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi'),
            remark: fieldsValue.auditRemark,
            orderAuditStatus: titles === '审批通过' ? '01' : '02'
          }).then(res => {
            this.onRentRenewalDetail()
            this.queryOrderStatges()
            this.props.form.resetFields()
            this.handleCancel()
          })
        }
      )
    }

    return (
      <Modal
        destroyOnClose
        title={titles}
        visible={orderVisible === 'audit'}
        onOk={handleOk}
        width="450px"
        onCancel={this.handleCancel}
      >
        <Form>
          {titles === '审批拒绝' ? (
            <FormItem label="拒绝类型" {...formItemLayout}>
              {form.getFieldDecorator('refuseType', {
                rules: [{ required: true, message: '请选择拒绝类型' }]
              })(
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {Object.keys(AuditReason).map(option => {
                    return (
                      <Option key={option} value={option}>
                        {AuditReason[option]}
                      </Option>
                    )
                  })}
                </Select>
              )}
            </FormItem>
          ) : null}
          <FormItem label="小记" {...formItemLayout}>
            {form.getFieldDecorator('auditRemark', {
              rules: [{ required: true, message: '请输入小记' }]
            })(<Input.TextArea placeholder="请输入小记" />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }

  onConfirm = () => {
    const { orderId } = this.state
    busShopService.generateOrderContract({ orderId:getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi') }).then(res => {
      if (res) {
        message.success('签约成功')
        this.onRentRenewalDetail()
      }
    })
  }

  // 用户定位信息转换
  getUserLocation = obj => {
    let location = '无定位信息'
    if (obj) {
      const locaInfo = JSON.parse(obj)
      if (locaInfo.error) {
        location = locationErrorType[locaInfo.error]
      } else {
        location =
          locaInfo.country +
          locaInfo.province +
          locaInfo.city +
          locaInfo.district +
          locaInfo.streetNumber.street +
          locaInfo.streetNumber.number
      }
    }

    return location
  }

  renderBaseInfo() {
    const {
      userOrderInfoDto = {},
      rentShopDto = {},
      contractUrl,
      orderChgzContractDto = {},
      orderAntChainContractDto = {},
      userOrderNotaryDto,
      form,
      signFlowId
    } = this.props
    const orderId = getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')
    const { auditLabel, status } = userOrderInfoDto
    // const isAudit = localStorage.getItem('isAudit');
    const currentShopMatch =
    (!rentShopDto ? true : ((rentShopDto.shopId) === localStorage.getItem('shopId')))
      const { getFieldDecorator } = this.props.form
      // ---------------------------------重新打印按钮----------------------------------
      const { dispatch } = this.props
      const againFn = () => {
        dispatch({
          type: 'order/sfRepeatPrintExpress',
          payload: {
            orderId
          }
        })
      }
        
    return (
      <Card bordered={false} style={{ marginTop: 20 }}>
        <Descriptions title={<CustomCard title="下单人信息" />}>
          <Descriptions.Item label="姓名">
            {userOrderInfoDto.userName}
          </Descriptions.Item>
          <Descriptions.Item label="手机号">
            {userOrderInfoDto.telephone}
          </Descriptions.Item>
          <Descriptions.Item label="身份证号">
            {userOrderInfoDto.idCard}
          </Descriptions.Item>
          <Descriptions.Item label="年龄">
            {userOrderInfoDto.age}
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            {userOrderInfoDto.gender}
          </Descriptions.Item>
          <Descriptions.Item label="下单时间">
            {userOrderInfoDto.createTime}
          </Descriptions.Item>
          <Descriptions.Item label="在途订单数">
            {userOrderInfoDto.userPayCount > 1 ? (
              <span style={{ fontWeight: 'bold' }} className="red-status">
                {userOrderInfoDto.userPayCount}
                &emsp;(用户在平台有多笔在途订单，请注意！)
              </span>
            ) : (
              userOrderInfoDto.userPayCount
            )}
          </Descriptions.Item>
          <Descriptions.Item label="完结订单数">
            {userOrderInfoDto.userFinishCount}
          </Descriptions.Item>
          <Descriptions.Item label="订单状态">
            {orderStatusMap[userOrderInfoDto.status]}
          </Descriptions.Item>
          {/* <Descriptions.Item label="人脸认证" span={1}>
            {userOrderInfoDto.userFaceCertStatus ? (
              <span className="green-status">已通过</span>
            ) : (
              <span className="red-status">未通过</span>
            )}
          </Descriptions.Item>
          <Descriptions.Item label="银行卡认证" span={1}>
            {(this.state.userBankList?.length && this.state.userBankList?.[0].signStatus ==='02') ? (
                <span className="green-status">已认证</span>
            ) : (
                <span className="red-status">未认证</span>
            )}
          </Descriptions.Item> */}
          <Descriptions.Item label="身份证照片">
            {userOrderInfoDto.idCardBackUrl ? (
              <a>
                <img
                  src={userOrderInfoDto.idCardBackUrl}
                  style={{
                    width: 146,
                    height: 77,
                    marginRight: 20,
                    borderRadius: 4
                  }}
                  onClick={() => this.onKaiImg(userOrderInfoDto.idCardBackUrl)}
                  alt="身份证正面"
                />
                <img
                  src={userOrderInfoDto.idCardFrontUrl}
                  style={{
                    width: 146,
                    height: 77,
                    marginRight: 20,
                    borderRadius: 4
                  }}
                  onClick={() => this.onKaiImg(userOrderInfoDto.idCardFrontUrl)}
                  alt="身份证反面"
                />
                {userOrderInfoDto.faceImage && (
                  <img
                    src={userOrderInfoDto.faceImage}
                    style={{ width: 146, height: 77, borderRadius: 4 }}
                    onClick={() => this.onKaiImg(userOrderInfoDto.faceImage)}
                    alt="自拍照"
                  />
                )}
              </a>
            ) : (
              <span className="red-status">未上传</span>
            )}
          </Descriptions.Item>
          {/* <Descriptions.Item label="前置风控结果" span={1}>
            {this.state.suggest  ? (
                <span className="green-status">通过</span>
            ) : (
                <span className="red-status">未通过</span>
            )}
            <a
              type={'primary'} style={{marginLeft:'10px'}}
              onClick={() => this.lookRiskCheck()}
          >查看详情</a>
          </Descriptions.Item> */}
          <Descriptions.Item label="订单定位信息" span={1}>
            {this.getUserLocation(userOrderInfoDto.location)}
          </Descriptions.Item>
          {/*<Descriptions.Item label="公证结果" span={2}>*/}
          {/*  {(this.state.orderNotaryStatusStr) || (userOrderNotaryDto && userOrderNotaryDto.statusStr || '未公证')}*/}
          {/*</Descriptions.Item>*/}
          {/* <Descriptions.Item label="蚁盾分">
            {this.state.antRiskScore >= 0 ? (
              <span className="primary-color">{this.state.antRiskScore}分</span>
            ) : currentShopMatch ? (
              <Button
                type="primary"
                size="small"
                onClick={() => this.onQueryYidunScore()}
              >
                获取蚁盾分
              </Button>
            ) : (
              <span>暂无评分</span>
            )}
            &emsp;(0-100分之间，分值越高，风险越大，大于等于80分订单无法承保。)
          </Descriptions.Item> */}

        </Descriptions>
        {/* 订单状态为待审核 */}
        {currentShopMatch && ['11', '15', '112'].includes(status) ? (
          <Fragment>
            {/* {auditLabel !== '00' ? () : null} */}
              <Fragment>
                <Button
                  type="primary"
                  onClick={() => this.showOrderModal('audit', true)}
                >
                  审批通过
                </Button>
                <Button
                  type="primary"
                  onClick={() => this.showOrderModal('audit', false)}
                >
                  审批拒绝
                </Button>
              </Fragment>
            <Button type="primary" onClick={() => this.showOrderModal('close')}>
              关闭订单
            </Button>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('address')}
            >
              修改收货信息
            </Button>
          </Fragment>
        ) : null}
        {/* 订单状态为申请取消 */}
        {currentShopMatch && status === '13' ? (
          <Fragment>
            <Button type="primary" onClick={() => this.showOrderModal('close')}>
              关闭订单
            </Button>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('cancelNot')}
            >
              驳回取消申请
            </Button>
          </Fragment>
        ) : null}
        {/* 订单状态为待支付 */}
        {currentShopMatch && ['16', '18'].includes(status) ? (
          <>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('unpayClose')}
            >
              关闭订单
            </Button>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('address')}
            >
              修改收货信息
            </Button>
          </>
        ) : null}
        {/* 订单状态为待发货 */}
        {currentShopMatch && status === '04' ? (
          <Fragment>
            {/* {
  contractUrl?<Button type="primary" onClick={() => this.showOrderModal('deliver')}>
  发货
</Button>:<Button type="primary" onClick={() => this.showOrderModal('deliver')}>
  发货
</Button>
} */}
            {/*{contractUrl ? null : (*/}
            {/*  <Popconfirm*/}
            {/*    title={<div>费用：{this.state.cost}元</div>}*/}
            {/*    style={{*/}
            {/*      textAlign: 'center',*/}
            {/*    }}*/}
            {/*    icon={null}*/}
            {/*    okText="确定"*/}
            {/*    cancelText="取消"*/}
            {/*    disabled={this.state.sign}*/}
            {/*    onConfirm={this.onConfirm}*/}
            {/*  >*/}
            {/*    <Button type="primary">签约存证</Button>*/}
            {/*  </Popconfirm>*/}
            {/*)}*/}
            <Popconfirm
              title="确定要打印面单机吗？"
              onConfirm={() => this.showOrderModal('paster')}
            >
              <Button
                type="primary"
              >
                发货
              </Button>
            </Popconfirm>
            <Button type="primary" onClick={() => this.showOrderModal('close')}>
              关闭订单
            </Button>
            <Button
              type="primary"
              onClick={() => this.showOrderModal('address')}
            >
              修改收货信息
            </Button>
          </Fragment>
        ) : null}
        {/* 重新打印按钮 */}
        { (
          <Button type="primary" onClick={() => againFn()}>
            重新打印
          </Button>
        ) }
        {/* 订单状态为待确认收货 */}
        {currentShopMatch && status === '05' ? (
          <Fragment>
            {/*<Button type="primary" onClick={() => this.showOrderModal('close')}>*/}
            {/*  关闭订单*/}
            {/*</Button>*/}
            <Button
              type="primary"
              onClick={() => this.showOrderModal('express')}
            >
              修改物流信息
            </Button>
          </Fragment>
        ) : null}
        {/* 订单状态为待结算 */}
        {currentShopMatch && status === '07' ? (
          <Button
            type="primary"
            onClick={() =>
              this.settleDia(
                'settle',
                orderId,
                userOrderInfoDto.orderCashId,
                userOrderInfoDto
              )
            }
          >
            结算
          </Button>
        ) : null}
        {getParam('settlement') ? (
          <Button type="primary" onClick={() => this.showOrderModal('remarks')} >
            记录催收
          </Button>
        ) : null}
        {currentShopMatch ? (
          <Button type="primary" onClick={() => this.showOrderModal('remark')}>
            备注
          </Button>
        ) : null}
        {signFlowId ? (
          <Button type="primary" onClick={() => this.getSignDownloadUrl()}>
          查看合同
        </Button>
        ) : null}

        {/* 添加派单按钮 */}
        {/* <Button type="primary" onClick={() => this.showSendOrder()}>
          派单
        </Button> */}
        {/* 添加加入黑名单按钮 */}
        {/* <Button
          type="primary"
          onClick={() => this.addBlackList(userOrderInfoDto)}
        >
          加入黑名单
        </Button> */}
            {/* 公证 按钮*/}
          {/*{(currentShopMatch && status !== '09' && currentShopMatch && status !== '10' && currentShopMatch && status !== '11') && (userOrderNotaryDto ===null || userOrderNotaryDto && userOrderNotaryDto.status ==='4') ? (*/}
          {/*    <Fragment>*/}
          {/*            <Fragment>*/}
          {/*                <Button*/}
          {/*                    type="primary"*/}
          {/*                    onClick={() => this.orderNotary()}*/}
          {/*                    disabled={this.state.confirmLoading}*/}
          {/*                >*/}
          {/*                    公证*/}
          {/*                </Button>*/}
          {/*            </Fragment>*/}
          {/*    </Fragment>*/}
          {/*) :*/}
          {/*    (userOrderNotaryDto && userOrderNotaryDto.status !=='4' && userOrderNotaryDto && userOrderNotaryDto.status !=='3') &&  <Fragment>*/}
          {/*    <Fragment>*/}
          {/*        <Button*/}
          {/*            type="primary"   onClick={() => this.cancelOrderNotary()}>*/}
          {/*            取消公证*/}
          {/*        </Button>*/}
          {/*        <Button type="primary"  onClick={() => this.queryOrderNotaryLink()}>*/}
          {/*            重新获取公证地址*/}
          {/*        </Button>*/}
          {/*        <Button type="primary"  onClick={() => this.queryOrderNotary()}>*/}
          {/*            获取公证结果*/}
          {/*        </Button>*/}

          {/*    </Fragment>*/}
          {/*</Fragment>}*/}

        <Divider />
        {orderChgzContractDto &&
        userOrderInfoDto.status != '01' &&
        userOrderInfoDto.status != '10' ? (
          <Descriptions>
            <Descriptions.Item label="公证状态" span={2}>
              {signStatus[orderChgzContractDto.status]}&emsp;&emsp;
              {orderChgzContractDto.status == 'SIGNED' ? (
                <>
                  <Popconfirm
                    title="是否通过用户的签名?"
                    onConfirm={() => this.signPass()}
                  >
                    <Button type="primary">通过</Button>
                  </Popconfirm>
                  <Popconfirm
                    title="是否驳回用户的签名?"
                    onConfirm={() => this.signReject()}
                  >
                    <Button type="primary">驳回</Button>
                  </Popconfirm>
                </>
              ) : null}
            </Descriptions.Item>
            <Descriptions.Item label="用户签名" span={2}>
              {orderChgzContractDto.signFile ? (
                <a>
                  <img
                    src={orderChgzContractDto.signFile}
                    style={{ width: 146, height: 77, marginRight: 20 }}
                    onClick={() => this.onKaiImg(orderChgzContractDto.signFile)}
                  />
                </a>
              ) : (
                <span className="red-status">未签署</span>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证告知书" span={1}>
              {orderChgzContractDto.notarizationNoticeFile ? (
                <a
                  href={orderChgzContractDto.notarizationNoticeFile}
                  target="_blank"
                >
                  《公证告知书》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证谈话笔录" span={1}>
              {orderChgzContractDto.talkRecordFile ? (
                <a href={orderChgzContractDto.talkRecordFile} target="_blank">
                  《公证谈话笔录》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="租赁服务协议" span={1}>
              {orderChgzContractDto.signContractFile ? (
                <a href={orderChgzContractDto.signContractFile} target="_blank">
                  《租赁服务协议》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="公证书" span={1}>
              {orderChgzContractDto.notarizationUrl ? (
                <a href={orderChgzContractDto.notarizationUrl} target="_blank">
                  《公证书》
                </a>
              ) : (
                '无'
              )}
            </Descriptions.Item>
          </Descriptions>
        ) : null}
        {/* <Descriptions>
          <Descriptions.Item label="区块链合同状态" span={1}>
            <span>
              {orderAntChainContractDto
                ? contractStatus[orderAntChainContractDto.status]
                : '无'}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="区块链合同" span={1}>
            {orderAntChainContractDto &&
            orderAntChainContractDto.status === 'SIGNED' ? (
              <a href={orderAntChainContractDto.contractFile} target="_blank">
                《区块链合同》
              </a>
            ) : (
              '无'
            )}
          </Descriptions.Item>
        </Descriptions> */}
        {/* <Divider /> */}
        {/* <Modal
            title={'前置风控'}
            visible={this.state.visibleRiskCheck}
            onCancel={this.handleCancelRiskCheck}
            footer={null}
        >
          <Table
              rowKey="orderNo"
              dataSource={this.state.userPreRiskCheckList && this.state.userPreRiskCheckList}
              columns={this.columnsRiskCheck}
              width={360}
              pagination={false}
          />
        </Modal> */}
        <Modal
            title={'公证地址'}
            visible={this.state.visibleOrderNotary}
            onCancel={this.handleCancelOrderNotary}
            footer={null}
        >
        <span> 公证地址： <CopyToClipboard text={this.state.orderNotaryData} /></span>
        </Modal>
      </Card>

    )
  }

  // 设置协商逾期费
  renderOverdueFeeModal() {
    const { orderVisible, overdueId } = this.state
    const { getFieldDecorator } = this.props.form

    const handleOk = e => {
      e.preventDefault()
      this.props.form.validateFields(['fee'], (err, values) => {
        if (!err) {
          orderService
            .modifyOverdueFee({ id: overdueId, businessOverdueFee: values.fee })
            .then(res => {
              this.queryOrderStatges()
              this.handleCancel()
            })
        }
      })
    }

    return (
      <Modal
        title="设置协商逾期费"
        visible={orderVisible === 'overduefee'}
        onOk={handleOk}
        onCancel={this.handleCancel}
        destroyOnClose
      >
        <Form>
          <Form.Item label="协商逾期费" {...formItemLayout}>
            {getFieldDecorator('fee', {
              rules: [{ required: true, message: '请输入协商逾期费' }]
            })(<Input addonAfter="元" placeholder="请输入协商逾期费" />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

  render() {
    const { orderBuyOutDto, wlList } = this.props
    const { drawerVisible } = this.state

    return (
      <PageHeaderWrapper>
        <Spin
          spinning={
            getParam('RentRenewal')
              ? this.props.RentRenewalLoading
              : this.props.loading
          }
        >
          {this.renderBaseInfo()}
          {this.renderContentTabCard()}
        </Spin>

        {this.renderRemarkModal()}
        {this.renderDeliverModal()}
        {this.renderCloseModal()}
        {this.renderUnpayCloseModal()}
        {this.renderPasterModal()}
        {this.renderSettleModal()}
        {this.renderAddressModal()}
        {this.renderAuditModal()}
        {this.renderCollectionRecordModal()}
        {this.renderOverdueFeeModal()}
        {this.renderSelectProduct()}
        <Drawer
          width={420}
          title={this.state.drawerTitle || '发货物流信息'}
          placement="right"
          onClose={this.onClose}
          visible={drawerVisible}
        >
          <Timeline>
            {wlList.map((item, idx) => {
              let color = 'blue'
              if (idx === 0) {
                color = 'green'
              }
              return (
                <Timeline.Item
                  style={{ color: idx !== 0 ? '#aaa' : '#333' }}
                  key={idx}
                  color={color}
                >
                  <p>{item.remark}</p>
                  <p>{item.datetime}</p>
                </Timeline.Item>
              )
            })}
          </Timeline>
        </Drawer>
        <Modal
          title="身份证照片/自拍照"
          visible={this.state.visiblesimg}
          onCancel={this.handleCancels}
          destroyOnClose
          footer={null}
        >
          <img src={this.state.img} alt="alt" style={{ width: '100%' }} />
        </Modal>

        {/* 派单modal */}
        {this.state.sendOrder && (
          <SendOrder
            isShow={this.state.sendOrder}
            orderId={getParam('id') ? getParam('id') :localStorage.getItem('orderIdDiuShi')}
            closeSendOrder={this.closeSendOrder}
          />
        )}

      </PageHeaderWrapper>
    )
  }
}
